CODEWITHSUNDEEP
cssjquery-uijquery-ui-dialog
danludwig
danludwig

Reputation: 47375

Can I set a custom ui-widget-overlay class when opening a jQuery UI dialog?

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;
}

Upvotes: 0

Views: 2995

Answers (2)

CaptainPantsFace
CaptainPantsFace

Reputation: 31

Actually there is a really simple way to do this using the CSS.(So long as you downloaded the jQuery UI library). There should be a jquery style sheet entitled: "jqGrid-custom.css"

Simply go into the overlays section and adjust this line:

.ui-widget-overlay { background: #aaaaaa url(/img/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity:.9;filter:Alpha(Opacity=90); }

Upvotes: 3

PriorityMark
PriorityMark

Reputation: 3247

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.

Upvotes: 2

Related Questions