如何在Visual Studio Code中创建类似“是否信任作者”的模态框？

你用vscode.window.showInformationMessage加modal: true得到的是右下角的通知式模态，和你需要的居中显示、占据窗口中心区域的模态框不是同一类。

要实现后者，主要有两种方案：

1. 原生API实现基础居中模态 #

如果只需要简单的选项选择或输入功能，用VS Code提供的原生API即可：

选项选择模态 #

使用vscode.window.showQuickPick，开启modal: true就能生成居中的选择框：

import * as vscode from 'vscode';

async function showCenteredSelectionModal() {
  const options = ['确认', '取消', '稍后处理'];
  const selectedOption = await vscode.window.showQuickPick(options, {
    modal: true,
    title: '请确认操作'
  });
  
  if (selectedOption) {
    vscode.window.showInformationMessage(`你选择了：${selectedOption}`);
  }
}

输入框模态 #

用vscode.window.showInputBox并设置modal: true，得到带输入功能的居中模态：

import * as vscode from 'vscode';

async function showCenteredInputModal() {
  const userInput = await vscode.window.showInputBox({
    modal: true,
    title: '输入配置项',
    prompt: '请输入需要设置的参数'
  });
  
  if (userInput) {
    vscode.window.showInformationMessage(`你输入的内容：${userInput}`);
  }
}

2. 自定义Webview实现复杂模态 #

如果需要自定义布局、样式或交互逻辑，用Webview创建模态化面板是最佳选择：

import * as vscode from 'vscode';

function showCustomModal() {
  const modalPanel = vscode.window.createWebviewPanel(
    'customCenterModal', // 唯一ID
    '自定义模态框', // 面板标题
    vscode.ViewColumn.One, // 显示位置（模态模式下无实际影响）
    {
      enableScripts: true,
      modal: true, // 标记为模态
      retainContextWhenHidden: true
    }
  );

  // 自定义模态框的HTML内容
  modalPanel.webview.html = `
    <!DOCTYPE html>
    <html lang="zh-CN">
    <body style="padding: 20px; text-align: center;">
      <h2>自定义模态内容</h2>
      <p>这里可以添加任意HTML元素和样式</p>
      <button style="margin: 10px; padding: 8px 16px;" onclick="closeModal()">关闭</button>
      
      <script>
        // 向扩展发送关闭消息
        function closeModal() {
          window.postMessage({ command: 'closeModal' });
        }
      </script>
    </body>
    </html>
  `;

  // 监听Webview的消息，处理关闭逻辑
  modalPanel.webview.onDidReceiveMessage(msg => {
    if (msg.command === 'closeModal') {
      modalPanel.dispose();
    }
  });
}

这种方式可以完全控制模态框的外观和行为，适配复杂业务场景。

内容的提问来源于stack exchange，提问作者sharkk22