Best IT Recipes

How can I put my jQuery dialog in the center?

I tried the following code, but it only positions the dialogs of the upper left corner position in the center, and this makes the element align to the right. How can I center the dialogue with a real center that counts the width of the elements so that the center line reduces the dialogue to 50% 50% half?

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

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

+61
jquery jquery-ui dialog jquery-dialog
Dec 03 '09 at 12:54
source share
21 answers

I am sure you do not need to set a position:

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

should center by default .

I looked through the article and also checked what it says on the official jQuery-ui website

+43
Dec 03 '09 at 13:14
source share

The latest jQuery user interface has a position component:

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

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

+63
Sep 03 '10 at 2:11
source share

Since dialogue requires a position, you need to enable js position

 <script src="jquery.ui.position.js"></script>
+18
Jun 28 2018-12-12T00:
source share

So, if someone clicks on this page like me, or when I forget in 15 minutes, I use jqueryui-dialogue version 1.10.1 and jquery 1.9.1 with ie8 in iframe (blah) and it needs to be within the specified or does not work, i.e.

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

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

+10
Mar 15 '13 at 5:13
source share
 open: function () { var win = $(window); $(this).parent().css({ position: 'absolute', left: (win.width() - $(this).parent().outerWidth()) / 2, top: (win.height() - $(this).parent().outerHeight()) / 2 }); }
+8
Jun 03 '15 at 15:28
source share

To fix the 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) }); }
+7
Aug 2 '13 at 14:18
source share

Jquery UI 1.9.2 , jquery and later do not support IE8

I found two solutions for this.

  • 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") }
+4
Feb 21 '14 at 6:01
source share

Try it....

 $(window).resize(function() { $("#dialog").dialog("option", "position", "center"); });
+4
May 14 '14 at 2:16
source share

I get better results to put the jQuery dialog in the center of the browser window using

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

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

+4
Apr 10 '15 at 23:09
source share

According to the following discussion, the problem may be related to lower IE compatibility in new versions of jQuery, returning 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

+3
Dec 20
source share

Another thing that can give you hell with jQuery Dialog positioning, especially for documents larger than the browser viewing port - you should add an ad

 <!DOCTYPE html>

At the top of the document.

Without it, jquery tends to put a dialog at the bottom of the page, and errors can occur when you try to drag it.

+3
Dec 15 '14 at 13:14
source share

The following position parameter worked for me

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

Good luck

+3
May 15 '15 at 2:54
source share

I need to call the dialog() function 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 } });
+3
Nov 09 '15 at
source share

If you use separate jquery files or custom jquery downloads anyway, make sure jquery.ui.position.js is also added to your page.

+2
Jan 23 '12 at 17:13
source share

Do you only work on this in IE? If so, try adding this to the FIRST line of your page HEAD tag:

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

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

+2
Nov 13
source share

Try this for older versions and for those who do not want to use the position:

 $("#dialog-div-id").dialog({position: ['center', 'top'],....
+2
Jun 14 '13 at 13:39
source share

You also need to perform manual re-centering if using jquery ui on mobile devices - the dialogue is manually positioned using the "left and top" css property. if the user switches orientation, the positioning is no longer centered and then needs to be adapted / re-centered.

+2
Jun 14 '13 at 22:25
source share

For a Win7 / IE9 environment installed only in the css file:

 .ui-dialog { top: 100px; left: 350px !important; }
+2
Jul 22 '13 at 14:20
source share

I fixed using css:

 .ui-dialog .ui-dialog-content { width: 975px!important; height: 685px!important; position: fixed; top: 5%; left: 50%; margin:0 0 0 -488px; }
0
Feb 14 '14 at 4:18
source share

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

Wherever I used dialog , I initialized it with the following position option:

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

However, I found that removing position: "center" or replacing it with the correct syntax did not help, for example:

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

Although the above is true, I also used option to set the position as center when I loaded the page in the old way, for example:

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

This made all of my dialogs stand in the upper left of the view port.

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

 passwordDialogInstance.dialog( "option", "position", { my: "center", at: "center", of: window } );
0
Apr 14 '17 at 11:34 on
source share

Unable to force IE9 to center the dialog.

Fixed by adding this to css:

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

Percentage does not matter. Any small number worked.

-one
May 30 '14 at 10:45
source share


More articles:


All Articles