如何在Microsoft VSTS模态对话框关闭前触发事件并添加确认提示？

针对你遇到的VSTS模态对话框点击右上角关闭按钮（'x'）时无法触发前置确认的问题，这里有几个可行的解决方案，核心思路是拦截默认的关闭按钮点击行为，加入确认逻辑后再执行关闭操作：

方案1：直接拦截关闭按钮的点击事件（适用于Office UI Fabric/VSTS内置对话框） #

VSTS的模态对话框基于Office UI Fabric组件构建，右上角的关闭按钮通常带有.ms-Dialog-buttonClose（部分版本为.ms-Dialog-closeButton）的类名。我们可以在对话框显示后获取这个按钮，覆盖它的默认点击行为：

代码示例（TypeScript） #

import { Dialog } from 'azure-devops-ui/Dialog';

// 创建并显示对话框
const myDialog = new Dialog({
  title: '我的自定义对话框',
  content: '请完成当前操作后再关闭',
  onClose: () => {
    // 原有的关闭后执行逻辑
    console.log('对话框已关闭');
  }
});
myDialog.show();

// 对话框渲染完成后，获取关闭按钮并添加拦截逻辑
setTimeout(() => {
  const closeButton = document.querySelector('.ms-Dialog-buttonClose');
  if (closeButton) {
    // 移除原有点击事件（确保默认行为被完全覆盖）
    closeButton.replaceWith(closeButton.cloneNode(true));
    const newCloseButton = document.querySelector('.ms-Dialog-buttonClose');
    
    newCloseButton?.addEventListener('click', (e) => {
      e.stopPropagation(); // 阻止默认的关闭事件向上冒泡
      e.preventDefault();
      
      // 弹出确认提示
      if (confirm('确定要关闭对话框吗？未保存的内容将会丢失。')) {
        myDialog.close(); // 用户确认后手动关闭对话框
      }
    });
  }
}, 100); // 短延迟确保DOM已渲染完成

方案2：使用MutationObserver监听对话框元素（更可靠） #

如果对话框的渲染存在延迟，直接用setTimeout可能不稳定，这时可以用MutationObserver监听DOM变化，自动捕获对话框元素并绑定拦截逻辑：

代码示例 #

import { Dialog } from 'azure-devops-ui/Dialog';

const myDialog = new Dialog({
  title: '我的自定义对话框',
  content: '请完成当前操作后再关闭',
  onClose: () => console.log('对话框已关闭')
});
myDialog.show();

// 创建DOM变化监听器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node instanceof HTMLElement && node.classList.contains('ms-Dialog')) {
        const closeButton = node.querySelector('.ms-Dialog-buttonClose');
        if (closeButton) {
          bindCloseConfirmation(closeButton);
          observer.disconnect(); // 找到目标后停止监听
        }
      }
    });
  });
});

// 监听body下的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

// 绑定确认逻辑的函数
function bindCloseConfirmation(button: Element) {
  button.replaceWith(button.cloneNode(true));
  const newButton = document.querySelector('.ms-Dialog-buttonClose');
  
  newButton?.addEventListener('click', (e) => {
    e.stopPropagation();
    if (confirm('确定要关闭吗？')) {
      myDialog.close();
    }
  });
}

方案3：自定义对话框模板（完全控制关闭逻辑） #

如果你需要更灵活的控制，可以自定义对话框的HTML模板，自己添加关闭按钮，完全掌控点击行为：

代码示例 #

import { Dialog } from 'azure-devops-ui/Dialog';

// 自定义对话框内容，包含自定义关闭按钮
const dialogContent = `
  <div class="ms-Dialog-content">
    <button class="custom-close-button ms-Button ms-Button--icon">
      <i class="ms-Icon ms-Icon--Cancel"></i>
    </button>
    <p>请完成当前操作后再关闭</p>
  </div>
`;

const myDialog = new Dialog({
  title: '我的自定义对话框',
  content: dialogContent,
  onClose: () => console.log('对话框已关闭')
});
myDialog.show();

// 绑定自定义关闭按钮的确认逻辑
const customCloseBtn = document.querySelector('.custom-close-button');
customCloseBtn?.addEventListener('click', () => {
  if (confirm('确定要关闭吗？')) {
    myDialog.close();
  }
});

注意事项 #

• 不同版本的VSTS/Azure DevOps可能使用不同的Office UI Fabric版本，关闭按钮的类名可能略有差异，如果.ms-Dialog-buttonClose无效，可以尝试.ms-Dialog-closeButton。
• 如果是使用VSS扩展SDK创建的对话框（通过VSS.getService(VSS.ServiceIds.Dialog)），可以通过dialog.getDialogElement()方法获取对话框DOM元素，再执行上述拦截逻辑。

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