jQuery UI Custom CSS Scope .dialog() Quirks

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?

Answers


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');

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.


Need Your Help

Unable to find symbol 'Components'

visual-studio reference gruntjs typescript grunt-ts

I've got 3 modules in 3 separate folders, each (test-wise) with one file:

Difference between two selectors in jQuery

jquery html selector

In jQuery there is a selector called first-child. It selects the first child

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.