Home/ Questions/Q 6999247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:31:00+00:00

The jQuery UI dialog has a dialogClass option, which is nice, since the dialog

  • 0

The jQuery UI dialog has a dialogClass option, which is nice, since the dialog is nested directly within the document <body>. However when setting the modal option to true, a ui-widget-overlay div is also rendered directly within the body (as a sibling of the dialog div).

Is there a way to, in effect, apply an overlayClass when opening a jQuery UI dialog with modal: true?

I know we could apply custom css to the overlay by giving the <body> a class attribute, or by overriding the .ui-widget-overlay class directly. I’m looking for a solution that would make a css definition like the following work:

.my-custom-class.ui-widget-overlay {
    opacity: .5;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is no option for this. Looking at the source, there’s not an easy way to jocky it in there either. For reference, here’s the bit that adds the class:

        var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
        .appendTo(document.body)
        .css({
            width: this.width(),
            height: this.height()
        });

    You likely would be best to just customize / update your css to override / extend the default stylings.

    • 0