How to Remove the Close Button on the jQuery UI Dialog?

Disabling Escape key closure

Prevent your dialog from running away (closing) when Escape key is pressed with closeOnEscape: false option:

$("#my-dialog").dialog({
  closeOnEscape: false // Escape key: "Am I a joke to you?"
});


Class-specific button dismissal

To precisely control specific dialogs, create a unique class during dialog initialization and hide the close button:

$("#my-dialog").dialog({
  dialogClass: "nope-no-close" // Create a Unique Class
});


In your CSS, selectively remove the close button on dialogs where the class .nope-no-close is present:

.nope-no-close .ui-dialog-titlebar-close { display: none; } // Close button: "They see me hiding, they're hating."


DOM navigation and method chaining

Take a shortcut around the DOM with the power of method chaining, a double whammy of the .parent() and .children() methods:

$(".ui-dialog-titlebar").parent().children(".ui-dialog-titlebar-close").hide(); // Close button: "Now you see me, now I'm gone."


This efficiently surfs the DOM waves, leading you directly to the hide command for the close button.

Advanced customization guide

Scenario-based strategies

Understanding various dialog scenarios is key. Let's explore three unique cases:

1. Substitute the default close action with a custom "OK" button:

   $("#my-dialog").dialog({
     buttons: [{
       text: "OK", click: function() { $(this).dialog("close"); } // Close button: "Fine, I'll let 'OK' handle it!"
     }]
   });
   

2. Configure your dialog to vanish after a specific duration - a kind of auto-hide:

   setTimeout(function() {
     $("#my-dialog").dialog("close"); // Close button: "I guess my watch ended before theirs."
   }, 5000); // After 5 seconds
   

3. Strategize dynamic visibility of the close button based on specific application conditions.

Preservation of basic dialog functionality

Regular functional testing ensures that your custom alterations do not destabilize the jQuery UI dialog's default behavior.

Dialog HTML structure and documentation

A thorough understanding of your dialog's HTML structure and the jQuery UI Dialog documentation will save you from pulling your hair out in frustration.

Immersive, live examples

Boost comprehension by offering live demonstrations of your jQuery dialog tweaks, a visual guide to successful customization.