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

Answer 1

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

Answer 2

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.

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".

Answer 3

因为对话框需要一个位置，所以需要包含js位置

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

Answer 4

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, ie

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

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

Answer 5

open: function () {

    var win = $(window);

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

Answer 6

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)
    });
}

Answer 7

Try this....

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

Answer 8

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...

Answer 9

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
    }
});

Answer 10

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") }

Answer 11

Following position parameter worked for me

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

Good luck!

Answer 12

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

Answer 13

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.

Answer 14

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.

Answer 15

尝试使用旧版本和不想使用位置的人：

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

Answer 16

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.

Answer 17

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

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

Answer 18

如果您使用单独的jquery文件或自定义jquery下载，请确保您还在页面中添加了jquery.ui.position.js。

Answer 19

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 }
);

Answer 20

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;
}

Answer 21

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.

How can I position my jQuery dialog to center?

Question

21 answers

solution1
68 2010-09-03 02:11:09

solution2
49 ACCPTED 2009-12-03 13:14:16

solution3
18 2012-06-28 13:14:34

solution4
11 2013-03-15 05:13:28

solution5
10 2015-06-03 15:28:12

solution6
7 2013-08-02 14:18:34

solution7
6 2014-05-14 02:16:42

solution8
6 2015-04-10 23:09:53

solution9
5 2015-11-09 14:51:26

solution10
4 2014-02-21 06:01:58

solution11
4 2015-05-15 02:54:35

solution12
3 2012-12-20 10:57:20

solution13
3 2014-12-15 13:14:02

solution14
2 2012-11-13 21:49:40

solution15
2 2013-06-14 13:39:11

solution16
2 2013-06-14 22:25:18

solution17
2 2013-07-22 14:20:44

solution18
2 2012-01-23 17:13:45

solution19
1 2017-04-14 11:34:24

solution20
0 2014-02-14 04:18:26

solution21
-1 2014-05-30 22:45:14

How can I position my jQuery dialog to center?

Question

21 answers

solution1 68 2010-09-03 02:11:09

solution2 49 ACCPTED 2009-12-03 13:14:16

solution3 18 2012-06-28 13:14:34

solution4 11 2013-03-15 05:13:28

solution5 10 2015-06-03 15:28:12

solution6 7 2013-08-02 14:18:34

solution7 6 2014-05-14 02:16:42

solution8 6 2015-04-10 23:09:53

solution9 5 2015-11-09 14:51:26

solution10 4 2014-02-21 06:01:58

solution11 4 2015-05-15 02:54:35

solution12 3 2012-12-20 10:57:20

solution13 3 2014-12-15 13:14:02

solution14 2 2012-11-13 21:49:40

solution15 2 2013-06-14 13:39:11

solution16 2 2013-06-14 22:25:18

solution17 2 2013-07-22 14:20:44

solution18 2 2012-01-23 17:13:45

solution19 1 2017-04-14 11:34:24

solution20 0 2014-02-14 04:18:26

solution21 -1 2014-05-30 22:45:14

solution1
68 2010-09-03 02:11:09

solution2
49 ACCPTED 2009-12-03 13:14:16

solution3
18 2012-06-28 13:14:34

solution4
11 2013-03-15 05:13:28

solution5
10 2015-06-03 15:28:12

solution6
7 2013-08-02 14:18:34

solution7
6 2014-05-14 02:16:42

solution8
6 2015-04-10 23:09:53

solution9
5 2015-11-09 14:51:26

solution10
4 2014-02-21 06:01:58

solution11
4 2015-05-15 02:54:35

solution12
3 2012-12-20 10:57:20

solution13
3 2014-12-15 13:14:02

solution14
2 2012-11-13 21:49:40

solution15
2 2013-06-14 13:39:11

solution16
2 2013-06-14 22:25:18

solution17
2 2013-07-22 14:20:44

solution18
2 2012-01-23 17:13:45

solution19
1 2017-04-14 11:34:24

solution20
0 2014-02-14 04:18:26

solution21
-1 2014-05-30 22:45:14