Remove the Close Button from a jQuery UI Dialog

You will learn how jQuery UI renders a dialog close button, how to hide it safely with scoped CSS, and how to control other ways that a dialog can still be closed, such as the Escape key or your own action buttons.

A jQuery UI dialog is built from your original element plus additional HTML generated by the widget. One generated element is the title-bar close button, usually identified by the CSS class .ui-dialog-titlebar-close.

The most maintainable way to remove the visible X is usually to hide that generated element with CSS. Rather than applying the rule to every dialog on the site, assign a custom class to the specific dialog wrapper and scope the CSS rule to that class.

Hiding the button only changes the interface: it does not necessarily prevent every way of closing the dialog. By default, users may still close a dialog with the Escape key. If the dialog must stay open until an explicit action is completed, configure closeOnEscape: false and provide an intentional action such as Cancel, Back, or Continue.

This matters because user-interface restrictions and application rules are different things. Hiding a control affects what the user sees; validation and application logic determine what is actually allowed.

Think of a dialog as a room assembled by jQuery UI.

• Your #dialog element is the room's content.
• jQuery UI adds the walls, title bar, and X button around it.
• CSS is a set of decorating rules for that assembled room.

To hide the X, give this room a name, such as no-close-dialog, then tell CSS: “Inside rooms with this name, do not display the close button.”

The door can still be opened or closed in other ways. Likewise, hiding the X does not automatically disable Escape-key closing or code that calls .dialog("close").

Use the classes option to add a custom class to the generated dialog wrapper, then hide the close button inside that wrapper.

$("#dialog").dialog({
  classes: {
    "ui-dialog": "no-close-dialog"
  }
});

.no-close-dialog .ui-dialog-titlebar-close {
  display: none;
}

The classes option is available in modern jQuery UI versions. The ui-dialog key refers to the outer dialog element that jQuery UI creates. The value, no-close-dialog, is your own class name.

If the dialog should not close when the user presses Escape, add closeOnEscape: false:

$("#dialog").dialog({
  classes: {
    "ui-dialog": "no-close-dialog"
  },
  closeOnEscape: false,
  buttons: [
    {
      text: "Cancel",
      click: function () {
        $(this).dialog("close");
      }
    }
  ]
});

For older jQuery UI codebases, you may see dialogClass instead:

$("#dialog").dialog({
  dialogClass: "no-close-dialog"
});

The same CSS rule works with either approach.

Consider this markup:

<div id="confirm-dialog" title="Delete account?">
  This action cannot be undone.
</div>

And this code:

$("#confirm-dialog").dialog({
  autoOpen: false,
  modal: true,
  closeOnEscape: false,
  classes: {
    "ui-dialog": "no-close-dialog"
  },
  buttons: [
    {
      text: "Keep account",
      click: function () {
        $(this).dialog("close");
      }
    }
  ]
});

$("#open-confirmation").on("click", function () {
  $("#confirm-dialog").dialog("open");
});

.no-close-dialog .ui-dialog-titlebar-close {
  display: none;
}

What happens:

1. jQuery UI initializes #confirm-dialog as a dialog but keeps it closed because autoOpen is false.
2. It creates an outer dialog wrapper and adds the no-close-dialog class to it.
3. CSS finds .ui-dialog-titlebar-close inside that wrapper and hides the X button.
4. Clicking #open-confirmation opens the dialog.
5. Pressing Escape does nothing because closeOnEscape is false.
6. Clicking Keep account runs the button's click function and closes the dialog deliberately.

• Required acknowledgement: Ask a user to acknowledge a policy update before continuing.
• Multi-step workflow: Keep a checkout, setup, or wizard dialog open while the user completes required fields.
• Unsaved changes warning: Make the available choices explicit, such as Discard changes and Keep editing.
• Blocking system notice: Display a maintenance or access notice that must be acknowledged with a specific button.
• Custom dialog controls: Remove the standard X because the product uses its own footer buttons with clearer labels.

Use this pattern carefully. Users should always have a clear, accessible path forward, such as a meaningful action button or a cancellation route when cancellation is appropriate.

In a real project, developers usually make this behavior reusable and scope it to only the dialogs that need it.

A typical confirmation-dialog configuration might look like this:

function openRequiredConfirmation() {
  $("#required-confirmation").dialog({
    modal: true,
    closeOnEscape: false,
    classes: {
      "ui-dialog": "no-close-dialog"
    },
    buttons: [
      {
        text: "I understand",
        click: function () {
          $(this).dialog("close");
        }
      }
    ]
  });
}

Common project patterns include:

• Scoped styling: A custom wrapper class prevents one CSS rule from hiding close buttons in every dialog.
• Explicit actions: Footer buttons explain what will happen instead of relying on a small icon.
• Validation before closing: A submit button validates form fields and only calls .dialog("close") after success.
• Guard clauses: Event handlers return early when required input is missing.
• Centralized styles: The .no-close-dialog rule is stored in the application's dialog or component stylesheet.

Do not rely on the absence of the X button as security. Server-side authorization and validation must still protect sensitive actions.

Using closeText to try to remove the button

closeText changes the accessible text or label; it does not remove the close button.

// This does not hide the X button.
$("#dialog").dialog({
  closeText: "Close dialog"
});

Use scoped CSS when the goal is to hide the button.

Hiding close buttons for every dialog accidentally

/* This affects all jQuery UI dialogs. */
.ui-dialog-titlebar-close {
  display: none;
}

Prefer a scoped selector:

.no-close-dialog .ui-dialog-titlebar-close {
  display: none;
}

Forgetting about the Escape key

This configuration hides the X, but Escape can still close the dialog:

$("#dialog").dialog({
  classes: {
    "ui-dialog": "no-close-dialog"
  }
});

If Escape should not close it, set:

closeOnEscape: false

Removing generated elements with fragile selectors

Code such as this can work, but it depends on the widget's generated DOM and is generally less maintainable than CSS:

$("#dialog").closest(".ui-dialog").find(".ui-dialog-titlebar-close").remove();

Use the documented widget options plus CSS where possible.

Leaving users without an understandable action

A dialog with no X, no Escape handling, and no action buttons can trap users. Always provide an appropriate visible action, unless the dialog is intentionally transient and closes automatically.

In most cases, combine scoped CSS for the X and closeOnEscape: false only when Escape should also be disabled.

// Modern jQuery UI: add a class to one dialog wrapper
$("#dialog").dialog({
  classes: {
    "ui-dialog": "no-close-dialog"
  }
});

/* Hide the X only in that dialog */
.no-close-dialog .ui-dialog-titlebar-close {
  display: none;
}

// Also prevent Escape from closing the dialog
$("#dialog").dialog({
  closeOnEscape: false,
  classes: {
    "ui-dialog": "no-close-dialog"
  }
});

// Close intentionally from a custom button
$(this).dialog("close");

• .ui-dialog-titlebar-close is the generated close-button selector.
• closeText changes the label; it does not hide the X.
• Scope CSS with a custom class unless every dialog should lose its X.
• Hiding the X is not a security mechanism.
• Provide a clear action so users are not trapped in the dialog.

How do I hide the X button in a jQuery UI dialog?

Add a custom class to the dialog wrapper with the classes option, then use CSS to set .ui-dialog-titlebar-close to display: none within that class.

Does hiding the close button disable the Escape key?

No. Set closeOnEscape: false if pressing Escape should not close the dialog.

Can I remove the close button from only one dialog?

Yes. Use a custom wrapper class such as no-close-dialog and scope the CSS selector to that class.

What does closeText do in jQuery UI dialog?

It changes the close button's text or accessible label. It does not remove or hide the button.

How can I close a dialog after hiding its X button?

Call $(this).dialog("close") from a custom dialog button or another event handler.

Is it okay to prevent users from closing a dialog?

It can be appropriate for a required confirmation or an in-progress operation, but provide clear actions and avoid trapping users without a way to proceed.

Why not use JavaScript to remove .ui-dialog-titlebar-close?

It is possible, but CSS is usually clearer and less dependent on the widget's generated DOM structure.

• jQuery UI dialog options — Configure modal behavior, buttons, keyboard behavior, and lifecycle callbacks.
• CSS selectors — Target generated widget elements precisely without changing unrelated components.
• CSS class scoping — Limit a style rule to one component or dialog type.
• Event handling in jQuery — Open, close, and respond to dialog actions.
• Form validation — Keep a dialog open until required input is valid.
• Accessibility for modal dialogs — Ensure dialogs have understandable controls and do not unnecessarily trap keyboard users.
• Guard clauses and early returns — Stop a dialog action when required conditions are not met.