How can I position my jQuery dialog to center?

Question

I have tried following code, but it only positions dialogs left upper corner position to center, and that makes element to be aligned to right. How can I center dialog to real center which counts elements width, so that center line will cut dialog to 50% 50% halfs?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

I am having a similar problem to what I am assuming that the OP did. The dialog is positioning in the top left corner no matter what I do! Very frustrating. — Nate Bunney, Commented Apr 18, 2012 at 4:11
your tip to use position (center) attr/property solved my similar problem on mobiles. But I use jquery-ui-1.9.2.custom. — Michal - wereda-net, Commented May 20, 2015 at 10:00

WhyNotHugo · Accepted Answer · 2010-09-03 02:11:09Z

73

The latest jQuery UI has a position component:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download

answered Sep 3, 2010 at 2:11

WhyNotHugo

9,7876 gold badges65 silver badges73 bronze badges

14

I had trouble with this because it would sometimes change the position of the content of the dialog box but not the outer box, so here is what worked for me: $('#myDialog').dialog('widget').position({my:"center", at:"center", of:window)}
– semmelbroesel
Commented Apr 11, 2014 at 21:31
1

This doesn't work for me on Safari 6.2.3 as I scroll down and trigger this function, the element will be positioned below the viewport.
– gamov
Commented Feb 26, 2015 at 9:00
1

@semmelbroesel $('#myDialog').dialog('widget') and $('#myDialog').parent() both work.
– actaram
Commented Jul 20, 2016 at 12:22
1

$('#MyDialog').dialog('option','position',{ my: "center", at: "center", of: window })
– Joe DF
Commented Oct 23, 2018 at 0:22
@JoeDF answer works correctly. But it doesn't work in iOS safari. Does anyone have an idea, why?
– PiyaModi
Commented Feb 27, 2019 at 3:21

Add a comment |

gunr2171 · Accepted Answer · 2016-09-09 18:02:54Z

I'm pretty sure you shouldn't need to set a position:

$("#dialog").dialog();

should center by default.

I did have a look at the article, and also checked what it says on the official jquery-ui site about positioning a dialog : and in it were discussed 2 states of: initialise and after initialise.

Code examples - (taken from jQuery UI 2009-12-03)

Initialize a dialog with the position option specified.

$('.selector').dialog({ position: 'top' });

Get or set the position option, after init.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

I think that if you were to remove the position attribute you would find it centers by itself else try the second setter option where you define 3 elements of "option" "position" and "center".

Well, the reason for centering is that sometimes you dynamically load content after the dialog is already loaded. — isaaclw, Commented Oct 7, 2015 at 19:51

projo · Accepted Answer · 2012-06-28 13:14:34Z

20

Because the dialog need a position, You need to include the js position

<script src="jquery.ui.position.js"></script>

answered Jun 28, 2012 at 13:14

projo

4046 silver badges12 bronze badges

Bingo - we have a winner. That was my problem. Thanks!
– Chris Holmes
Commented Jul 26, 2013 at 20:22
excellent! thanks for that. Couldn't work out why it wasn't working
– space_balls
Commented Sep 29, 2013 at 23:27

Add a comment |

Rikin Patel · Accepted Answer · 2017-06-15 09:37:47Z

12

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

edited Jun 15, 2017 at 9:37

Rikin Patel

9,1957 gold badges72 silver badges80 bronze badges

answered Jun 3, 2015 at 15:28

Jean G.T

111 silver badges25 bronze badges

1

i liked this solution, in conjunction with window.scrollTo(0, 0); it works great for me +1
– MaVRoSCy
Commented Jul 10, 2015 at 8:54
@MaVRoSCy, I'm running into a similar issue. If i scroll and then open the dialog, it does not positon to center. How did you use the scrollTo and where do I add it?
– user1527762
Commented Aug 12, 2015 at 2:45
@user1527762 Have you tried using: autoReposition: true, as an initialization parameter of the jquery ui dialog instance? Moreover, you could simply use something like: jQuery(window).on('resize', function() and bind to it a logic similar to the above, but using the described at: api.jqueryui.com/dialog/#method-isOpen
– Jean G.T
Commented Aug 13, 2015 at 16:47
1

I used this code to ensure it was in the middle of a window when there were scroll bars: left: (window.innerWidth - $(this).parent().parent().outerWidth())/2, top: (window.innerHeight - $(this).parent().parent().outerHeight())/2
– Doctor Parameter
Commented Nov 4, 2015 at 21:10
1

@Blake Parmenter: if the op has freedom to deal with the window perhaps resizeTo(x,y) javascript native function helps to ensure the window or to look for a fullscreen api could work as well :) that is to ensure the jquery ui based dialog window fits well in the screen of the viewer but it might ask for permission to execute and issue can happen if tabbed or pop up blocker is enabled on the nav browser
– Jean G.T
Commented Jan 17, 2017 at 5:06

| Show 9 more comments

Mike · Accepted Answer · 2013-03-15 05:13:28Z

11

So if anyone hits this page like I did, or for when I forget in 15 minutes, I'm using jqueryui dialog version 1.10.1 and jquery 1.9.1 with ie8 in an iframe(blah), and it needs a within specified or it doesn't work, i.e.

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Thanks to @vm370 for pointing me in the right direction.

answered Mar 15, 2013 at 5:13

Mike

1,2191 gold badge15 silver badges24 bronze badges

1

I didn't have to use within but the reason for my up vote is that it uses the position attribute like so: $('.selector').dialog({ position: my: "center bottom", at: "center top", of: $("#submitbutton") }); instead of adding a call at the end: $('.selector').position(...)
– LosManos
Commented Jun 3, 2014 at 14:55
This one makes sense a lot. Thank you.
– hsuk
Commented May 9, 2017 at 18:31

Add a comment |

Derek Gogol · Accepted Answer · 2015-04-10 23:09:53Z

9

I'm getting best results to put jQuery dialog in the center of browser's window with:

position: { my: "center bottom", at: "center center", of: window },

There's probably more accurate way to position it with option "using" as described in the documentation at http://api.jqueryui.com/position/ but I'm in a hurry...

answered Apr 10, 2015 at 23:09

Derek Gogol

1,40016 silver badges15 bronze badges

This must be in top! Thank you
– Igor Rebega
Commented Aug 22, 2018 at 13:12

Add a comment |

Eduardo Cuomo · Accepted Answer · 2013-08-02 14:18:34Z

7

To fix center position, I use:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

answered Aug 2, 2013 at 14:18

Eduardo Cuomo

18.5k7 gold badges119 silver badges97 bronze badges

I think you need $(w). Plus, this doesn't seem to deal with scrolling in the browser.
– Chris Prince
Commented Aug 18, 2015 at 6:37
@Chris Prince not necessarily, I think that the nav browser is intelligent enough to know that we are referring to the window at that instance, I could be wrong, but indeed if it should be rather w = $(window); a quick fix to that.. This approach is interesting because each time it opens up the dialog it looks for the window, which serves as an on window resize function call, so that's why my upvote, although I must add that normally when I use an open function within the dialog I as well use a this.dialog('destroy') on close, to allow reusability, specially with jQuery UI Theming
– Jean G.T
Commented Sep 22, 2017 at 2:21

Add a comment |

Rikin Patel · Accepted Answer · 2014-05-14 02:16:42Z

6

Try this....

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

answered May 14, 2014 at 2:16

Rikin Patel

9,1957 gold badges72 silver badges80 bronze badges

Add a comment |

prokki · Accepted Answer · 2015-11-09 14:51:26Z

6

I have to call function dialog() twice to position the dialog (jQuery v1.11.2 / jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

answered Nov 9, 2015 at 14:51

prokki

1394 silver badges12 bronze badges

Me too. Your suggestion fixed me. Have you found a better solution? Somewhere along the line I changed the version of jQuery and this issue started. Downgrading didn't fix it. Update: I mcved the position object to the first parameter group and it still worked
– Chad
Commented Jul 12, 2016 at 20:00

Add a comment |

Rikin Patel · Accepted Answer · 2017-06-15 09:35:03Z

5

Jquery UI 1.9.2, jquery and the later versions don' support IE8

I found two solutions for that.

Rollback to jquery UI 1.7.2 to support IE8,
Try this code with Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

edited Jun 15, 2017 at 9:35

Rikin Patel

9,1957 gold badges72 silver badges80 bronze badges

answered Feb 21, 2014 at 6:01

r-arun-r

892 silver badges7 bronze badges

Works perfectly in IE11 with jQueryUI 1.11.4
– Johnny Bones
Commented Jul 7, 2016 at 16:26
+1 because of the within param, which allows docking like on appendTo this element, and if using a modal window allows limiting that docking.
– Jean G.T
Commented Sep 22, 2017 at 2:23
at the center of body? That's a bit strange... If your page is a normal webpage (i.e longer than the viewport) your dialog window will appears way outside the view of the User and he will need to scroll down to see it.
– ThePhi
Commented May 20, 2021 at 13:42

Add a comment |

thedrs · Accepted Answer · 2014-12-15 13:14:02Z

4

Another thing that can give you hell with JQuery Dialog positioning, especially for documents larger than the browser view port - you must add the declaration

<!DOCTYPE html>

At the top of your document.

Without it, jquery tends to put the dialog on the bottom of the page and errors may occur when trying to drag it.

answered Dec 15, 2014 at 13:14

thedrs

1,44213 silver badges29 bronze badges

Add a comment |

Rakesh Prajapati · Accepted Answer · 2015-05-15 02:54:35Z

4

Following position parameter worked for me

position: { my: "right bottom", at: "center center", of: window },

Good luck!

answered May 15, 2015 at 2:54

Rakesh Prajapati

1,10410 silver badges17 bronze badges

Add a comment |

ArgisIsland · Accepted Answer · 2012-12-20 10:57:20Z

3

According to the following discussion, the problem could be due to less IE compatibility in the newer jQuery versions, reverting back to 1.7.2 seems to resolve the problem, which only occurs in IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

answered Dec 20, 2012 at 10:57

ArgisIsland

4074 gold badges9 silver badges19 bronze badges

Add a comment |

Luke · Accepted Answer · 2017-04-14 11:34:24Z

I had a problem with this and I finally figured this out. Until today I was using a really old version of jQuery, version 1.8.2.

Everywhere where I had used dialog I had initialised it with the following position option:

$.dialog({
    position: "center"
});

However, I found that removing position: "center" or replacing it with the correct syntax didn't do the trick, for example:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

Although the above is correct, I was also using option to set the position as center when I loaded the page, in the old way, like so:

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

This was causing all of my dialog windows to stick to the top left of the view port.

I had to replace all instances of this with the correct new syntax below:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

Ioannis Suarez · Accepted Answer · 2012-01-23 17:13:45Z

2

If you are using individual jquery files or a custom jquery download either way make sure you also have jquery.ui.position.js added to your page.

answered Jan 23, 2012 at 17:13

Ioannis Suarez

5876 silver badges5 bronze badges

Add a comment |

Jean-François Corbett · Accepted Answer · 2012-11-13 22:13:01Z

2

Are you running into this in IE only? If so, try adding this to the FIRST line of your page's HEAD tag:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

I had though that all compatibility issues were fixed in later jQueries, but I ran into this one today.

edited Nov 13, 2012 at 22:13

Jean-François Corbett

38.2k30 gold badges142 silver badges188 bronze badges

answered Nov 13, 2012 at 21:49

John

211 bronze badge

Add a comment |

avijendr · Accepted Answer · 2013-06-14 13:39:11Z

2

Try this for older versions and somebody who don't want to use position:

$("#dialog-div-id").dialog({position: ['center', 'top'],....

answered Jun 14, 2013 at 13:39

avijendr

4,1252 gold badges34 silver badges46 bronze badges

Add a comment |

gekido · Accepted Answer · 2013-06-14 22:25:18Z

2

You also need to do manual re-centering if using jquery ui on mobile devices - the dialog is manually positioned via a 'left & top' css property. if the user switches orientation, the positioning is no longer centered, and must be adapted / re-centered afterwards.

answered Jun 14, 2013 at 22:25

gekido

313 bronze badges

gekido: Are you suggesting to use this method?
– Jean G.T
Commented Jun 3, 2015 at 15:21
1

it was a while ago when I fought with this but we had a number of issues with jquery dialogs on mobile. basically they worked great - until the user switch orientation of the device. can't remember the specific fix that was applied, but basically we checked to see if the orientation had changed and then repositioned the dialog afterwards. Definitely felt a bit hacky, but it worked.
– gekido
Commented May 3, 2016 at 23:19

Add a comment |

Rikin Patel · Accepted Answer · 2017-06-15 09:35:32Z

2

For Win7/IE9 environment just set in your css file:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

edited Jun 15, 2017 at 9:35

Rikin Patel

9,1957 gold badges72 silver badges80 bronze badges

answered Jul 22, 2013 at 14:20

Nikolay

211 bronze badge

Add a comment |

Liko · Accepted Answer · 2014-02-14 04:18:26Z

0

I fixed with css:

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

answered Feb 14, 2014 at 4:18

Liko

2,23020 silver badges21 bronze badges

Add a comment |

Rikin Patel · Accepted Answer · 2017-06-15 09:36:14Z

0

Could not get IE9 to center the dialog.

Fixed it by adding this to the css:

.ui-dialog {
    left:1%;
    right:1%;
}

Percent doesn't matter. Any small number worked.

edited Jun 15, 2017 at 9:36

Rikin Patel

9,1957 gold badges72 silver badges80 bronze badges

answered May 30, 2014 at 22:45

SwellBuilt

11

Add a comment |

Tyler2P · Accepted Answer · 2023-04-21 15:05:54Z

0

position: {
 my: "center bottom",
 at: "center top",
 of: window,
 within: $(".content")
}

edited Apr 21, 2023 at 15:05

Tyler2P

2,39228 gold badges24 silver badges32 bronze badges

answered Apr 18, 2023 at 17:29

Logan

315 bronze badges

2

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach? That's even more critical in this case, where we have 21 existing answers, one which has been validated by 72 members of the community.
– Jeremy Caney
Commented Apr 22, 2023 at 0:11

Add a comment |

Collectives™ on Stack Overflow

How can I position my jQuery dialog to center?

22 Answers 22

Not the answer you're looking for? Browse other questions tagged
jquery
jquery-ui
dialog
jquery-dialog
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

22 Answers 22

Not the answer you're looking for? Browse other questions tagged jqueryjquery-uidialogjquery-dialog or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
jquery
jquery-ui
dialog
jquery-dialog
or ask your own question.