jQuery dialog always centered

Question

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!

Bind the `resize` event on the `window` and update your `top/left` positioning accordingly — Chad, Sep 26 '11 at 15:01
How can he mark your comment as the correct answer, I wonder? :-) — Hubro, Sep 26 '11 at 15:04

score 7 · Answer 1 · answered Nov 03 '11 at 17:53

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.

NakedBrunch · Answer 2 · 2011-09-27T12:14:21.623

5

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

Working jsFiddle: http://jsfiddle.net/vNB8M/

The dialog is centered with auto width & height and continues to be centered after window resize.

edited Sep 27 '11 at 12:14

answered Sep 26 '11 at 15:09

NakedBrunch

48,713
13
73
98

What doesn't "work"? Can you describe the problem in more detail? – NakedBrunch Sep 27 '11 at 12:14
The dialog won't be centered if I re-size the window of the browser. With `width & height = auto` the dialog is placed at the bottom-right. – shub Sep 27 '11 at 12:32
Did you see my jsFiddle? The code is working. Your problem must lie elsewhere. What CSS is being applied? – NakedBrunch Sep 27 '11 at 13:37
Thanks for the code. Sadly your code doesn't work with `.load(url, function()`. This is the challenge for me to bring this code working with the `load` method. – shub Sep 27 '11 at 13:50
Why doesn't it work? You can load any content using .load. The content is irrelevant UNLESS there is some CSS in the page that you're loading that is affecting the position of the dialog. – NakedBrunch Sep 27 '11 at 13:55
The `load` event causes problems, but I don't know why. I also loaded content without CSS and it also doesn't work. Can you please update your jsFiddle code with a load event? Thanks – shub Sep 27 '11 at 14:19
Just my 2 cents, because I'm having the same problem: you have both width and height set to auto. Try giving them a numeric value and see what happens. In my case, if I set the size to auto it won't center. – Hallaghan Oct 11 '11 at 15:03
@JordanArron how is it irrelevant? The dynamic content of the dialog itself is the only cause of this "problem". The dialog is centered based on its dimensions when it is created (with your static "Loading..." content); after that, the content changes and the dialog dimensions changes according to it, but if it makes its size double, the dialog is not centered anymore. – Pere Jul 11 '16 at 09:25

score 1 · Answer 3 · answered Jul 24 '14 at 20:22

None of the answers did quite what I wanted. For those that are still having problems with this, here is what worked for me. This will force the dialog to always appear in the center of the screen, and it will center the dialog as the browser is resized.

$( "#ShowDialogButton" ).click(function(){
    $( "#MyDialog" ).dialog({
       show: 'fade'
     }).dialog( "option", "position", { my: "center", at: "center", of: window } );

    $(window).resize(function() {
        $( "#MyDialog" ).dialog( "option", "position", { my: "center", at: "center", of: window } );
    });

});

Again, if it works for you is because you are not loading dynamic content into it. Your specific conditions difer of what the original asked for. — Pere, Jul 11 '16 at 09:27

score 0 · Answer 4 · edited May 23 '17 at 12:33

This solution is working:

$(window).resize(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});

Performance is quite bad, but you can wait for resize end: jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?.

I also tried this, but I can't scroll lower or higher than position of element which opened dialog:

$(window).scroll(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});

score 0 · Answer 5 · answered Sep 26 '11 at 15:03

0

The modal window around the dialog box should allow you to place the dialog box centered with the css of:

margin-left:auto;margin-right:auto;

Does this not work? Do you have a 'sample' page that we can look at?

answered Sep 26 '11 at 15:03

TeckniX

673
1
7
14

This wouldn't position the box along the Y axis – Hubro Sep 26 '11 at 15:06

jQuery dialog always centered

5 Answers5

Linked