如何阻止VSTS模态对话框关闭？点击左上角‘x’按钮时禁止关闭

Hey there! Let me break down how to stop that modal dialog from closing when someone hits the top-left 'X' button—whether you're building a custom extension or tweaking an existing VSTS/Azure DevOps page.

1. If You're Building a Custom VSTS/Azure DevOps Extension #

VSTS uses Office UI Fabric components under the hood, and their Dialog component fires an onDismiss event whenever someone tries to close it (including clicking the 'X'). You can override this event to block the close action specifically for the 'X' button.

Here's a TypeScript example using the Fabric UI Dialog:

import { Dialog, IDialogProps, IDialogDismissedEventArgs } from 'office-ui-fabric-react';

// Inside your component's dialog configuration
const dialogConfig: IDialogProps = {
  title: "Your Dialog Title",
  subText: "This dialog can't be closed with the X button!",
  // Override the dismiss event to control closure
  onDismiss: (event: React.MouseEvent<HTMLElement>, args: IDialogDismissedEventArgs) => {
    // Check if the close was triggered by the top-left 'X' button
    if (args.dismissedBy === 'closeButton') {
      // Block the default close behavior
      event.preventDefault();
      // Optional: Notify the user why the dialog isn't closing
      alert("Sorry, you can't close this dialog using the X button. Use the action buttons below instead.");
    } else {
      // Allow closing from other triggers (like clicking outside, if enabled)
      setIsDialogOpen(false); // Replace with your state management logic
    }
  },
  // Optional: Prevent closing when clicking the overlay behind the dialog
  modalProps: {
    isBlocking: true,
    preventDismissOnOverlayClick: true
  },
  // Add your intended action buttons here
  primaryButtonProps: {
    text: "Save",
    onClick: () => setIsDialogOpen(false)
  }
};

// Render the dialog with your config
<Dialog {...dialogConfig} />

2. If You're Tweaking an Existing VSTS/Azure DevOps Page (User Scripts) #

If you need to modify a built-in VSTS dialog (like using Tampermonkey or Greasemonkey), you'll need to target the 'X' button directly and block its click event. Since VSTS is a single-page app, the dialog loads dynamically, so we'll use a periodic check to find the button.

Here's a JavaScript example for user scripts:

// Check for the dialog close button every 500ms (adjust timing as needed)
const checkForCloseButton = setInterval(() => {
  const closeButton = document.querySelector('.ms-Dialog-closeButton');
  if (closeButton) {
    // Remove any existing listeners to avoid duplicate bindings
    closeButton.removeEventListener('click', blockDialogClose);
    // Add our custom listener to block the click
    closeButton.addEventListener('click', blockDialogClose);
    // Optional: Clear the interval once the button is found (if dialog is a one-time trigger)
    // clearInterval(checkForCloseButton);
  }
}, 500);

function blockDialogClose(e) {
  // Stop the default click action and prevent event bubbling
  e.preventDefault();
  e.stopPropagation();
  // Let the user know why the dialog isn't closing
  alert("This dialog can't be closed with the X button. Please use the provided options.");
}

Quick Note for User Scripts: #

VSTS occasionally updates its UI, so the class selector .ms-Dialog-closeButton might change over time. If this stops working, inspect the button element in your browser's dev tools to find the new class or ID to target.

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