JQuery dialog always centered

jqueryjquery-uimodal-dialog

How can I implement, that a jQuery modal dialog with auto width & height is always centered in the browser. Also after resizing the window of the browser.

The following code doesn't work. I think the problem is the auto width & height.

jQuery – code

$("<div class='popupDialog'>Loading...</div>").dialog({
  autoOpen: true,
  closeOnEscape: true,
  height: 'auto',
  modal: true,
  title: 'About Ricky',
  width: 'auto'
}).bind('dialogclose', function() {
  jdialog.dialog('destroy');
}).load(url, function() {
  $(this).dialog("option", "position", ['center', 'center'] );
});

$(window).resize(function() {
  $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

Thank you!

Best Answer

Acutally, I think the position: ["center", "center"] not be the best solution, as it assigns an explict top: and left: css properties to the dialog based on the size of the viewport at creation.

I came across this same issue when trying to have a dialog center on screen vertically. Here is my solution:

In the options part of my .dialog() function, I pass position:[null, 32]. The null sets the left: value the element's style, and the 32 is just for keeping the dialog box pegged to the top of the window. Also be sure to set an explicit width.

I also use the dialogClass option to assign a custom class, which is simply a margin:0 auto; css property:

.myClass{
    margin:0 auto;
}

And my dialog looks like:

  $('div#popup').dialog({
    autoOpen: false,
    height: 710,
    modal: true,
    position: [null, 32],
    dialogClass: "myClass",
    resizable: false,
    show: 'fade',
    width: 1080
  });

Hopefully this helps someone.

Related Topic