views:

432

answers:

1

When you use jquery UI dialog, all works well, except for one thing. When the browser is resized, the dialog just stays in it's initial position which can be really annoying.

You can test it out on: http://jqueryui.com/demos/dialog/

Click on the "modal dialog" example and resize your browser.

I'd love to be able to let dialogs auto-center when the browser resizes. Can this be done in an efficient way for all my dialogs in my app?

Thanks a lot!

+4  A: 

Setting the position option will force this, so just use the same selector covering all your dialogs where I use #dialog here (if it doesn't find them no action is taken, like all jQuery):

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Here's that same jQuery UI demo page adding only the code above, we're just adding a handler to the window's resize event with .resize(), so it triggers the re-center at the appropriate time. ​

Nick Craver
thanks, that looks great. Maybe I should have told that I don't always know what the ID of my dialog is, like this (how can I target that dialog?):var $dialog = $('<div><a href="#" title="Cancel">Cancel</a></a></div>') .html(assetBrowser) .dialog({ autoOpen: false, title: 'Assets Manager', modal: true, closeOnEscape: true, buttons: buttons, width: 840, height: 500 }); $dialog.dialog('open');
Jorre
@Jorre - They all get the same class when you create a dialog, to make it generic you can do this: `$(".ui-dialog-content").dialog("option", "position", "center");`, this will check for any dialog :)
Nick Craver