jQuery UI Custom CSS Scope .dialog() Quirks

Question

I've got a scenario where a third party app is using jqUI. So for my customizations I wish to use another version and have provided a custom CSS scope. With .dialog() jqUI moves the target outside of my custom scope for the absolute positioning/overlay. Here's a workaround:

// custom jQ namespace
var d = my.jq('#my-modal').dialog({ modal: true, autoOpen: false});
d.parent('.ui-dialog').wrap('<div class="my-part"></div>');
d.dialog('open');

However this now breaks the overlay shadowing. Does anyone have a fix for this?

Actually I'm wrong. The overlay is just very faint with the smoothness theme that I didn't notice. Who wants an answer? — ryan
– ryan, Commented Nov 30, 2011 at 15:02

ryan · Accepted Answer · 2011-12-05 13:18:36Z

1

At first I thought this wasn't an issue any longer but it actually is. Here's a workaround:

// custom jQ namespace
var d = my.jq('#my-modal').dialog({ 
  modal: true, 
  autoOpen: false, 
  'open': function () { my.jq('.ui-widget-overlay').wrap('<div class="my-part"></div>'); }
});
d.parent('.ui-dialog').wrap('<div class="my-part"></div>');
d.dialog('open');

answered Dec 5, 2011 at 13:18

ryan

6,6856 gold badges45 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

victordscott · Accepted Answer · 2013-05-03 13:00:02Z

1

With JQuery UI 1.10.2, the only way I could get the modal dialog to work CCS Scope is to wrap both the dialog and overlay in the "open" event like below:

open: function () {
    $('.ui-widget-overlay').each(function () {
        $(this).next('.ui-dialog').andSelf().wrapAll('<div class="CSSScopeClass" />');
    });
}

The only thing that does not seem to work with this approach is having "width" set to "auto". I also had to set the dialog width manually.

answered May 3, 2013 at 13:00

victordscott

3914 silver badges11 bronze badges

1 Comment

Kevin Over a year ago

Like a boss! jqueryui 1.10.3 - don't forget to remove the wrapper div from the DOM when the dialog is closed

Community · Accepted Answer · 2017-05-23 12:12:19Z

0

I realise this answer is a late but this issue turned up for me when I was trying to find a similar answer by searching in Google so thought I'd include this in case it helps anyone on a similar search:

    $('.ui-dialog').wrap('<div class="abc" />');
    $('.ui-widget-overlay').wrap('<div class="abc" />');

Where abc is the name of your 'CSS wrapper' - see this where I found the answer from Evgeni Nabokov. For more info on CSS wrapper in use with JQueru UI dialog box - see the following (but note it doesn't solve the issue of the CSS wrapper WITH THE DIALOG BOX - you need the above comments to help there: Filament blog)

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Aug 28, 2012 at 13:41

Steve

6025 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery UI Custom CSS Scope .dialog() Quirks

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related