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, Apr 18 '12 at 04: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, May 20 '15 at 10:00

score 70 · Answer 1 · answered Sep 03 '10 at 02:11

70

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 03 '10 at 02:11

WhyNotHugo

8,246
5
56
63

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 Apr 11 '14 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 Feb 26 '15 at 09:00
1

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

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

score 51 · Accepted Answer · edited Sep 09 '16 at 18:02

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, Oct 07 '15 at 19:51

score 20 · Answer 3 · answered Jun 28 '12 at 13:14

20

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

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

answered Jun 28 '12 at 13:14

projo

386
5
12

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

score 12 · Answer 4 · edited Jun 15 '17 at 09:37

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 '17 at 09:37

Rikin Patel

7,983
7
66
73

answered Jun 03 '15 at 15:28

Jean Paul A.K.A el_vete

587
9
24

1

i liked this solution, in conjunction with `window.scrollTo(0, 0);` it works great for me +1 – MaVRoSCy Jul 10 '15 at 08: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 Aug 12 '15 at 02: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: https://api.jqueryui.com/dialog/#method-isOpen – Jean Paul A.K.A el_vete Aug 13 '15 at 16:47
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 Nov 04 '15 at 21:10
@user1527762: At the dialog open annonymous function.. open : function(){ var document= $(document); var win = $(window); /* i guess this.parent is the document, r document could work but is the window what we use to center the dialogs*/ win.scrollTo(0, 0); $(this).parent().css({ position:'absolute', left: (win.width() - $(this).parent().outerWidth())/2, top: (win.height() - $(this).parent().outerHeight())/2 }); }, – Jean Paul A.K.A el_vete Jan 17 '17 at 05:01
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 Paul A.K.A el_vete Jan 17 '17 at 05:06
@JeanPaul are you using a plugin for win.scrollTo() method in your comment? In console, I'm getting an error `Uncaught Error: TrackJS Caught: win.scrollTo is not a function` it appears, scrollTo() is a window method, not a jquery method. Please clarify. Thx. – Chris22 Sep 21 '17 at 17:27
@Chris22 .. function.. open : function(){ var document= $(document); var win = $(window); ... Actually is a "Javascript" method. win is defined within the dialog open function, feel free to give that a try. – Jean Paul A.K.A el_vete Sep 21 '17 at 21:27
Or you could use something more general like: $('a[href^="#"]').on('click', function(event) { var target = $(this.getAttribute('href')); if( target.length ) { event.preventDefault(); $('html, body').stop().animate({ scrollTop: target.offset().top }, 'slow'); } }); – Jean Paul A.K.A el_vete Sep 21 '17 at 21:41
@JeanPaul, I see you removed the win.scrollTo(0,0) you had originally when I asked about it yesterday. Your original code (snippet): `open: function(){ var document = $(document); var win = $(window); win.scrollTo(0,0); $(this).parent().css({ position:'absolute', left: (win.width() - $(this).parent().outerWidth())/2, top: (win.height() - $(this).parent().outerHeight())/2 });` **$(window)** isn't javascript obj – Chris22 Sep 22 '17 at 16:09
@Chris22 I believe you are confused, first of all my answer isn't edited since 2015, 2.) Secondly, a comment is an extension not an answer 3.) I am really not understanding where are you going with this, so if I can help message me off this topic and I will be glad to assist you, if I can – Jean Paul A.K.A el_vete Sep 22 '17 at 20:15
http://www.comptechdoc.org/independent/web/cgi/javamanual/javawindow.html – Jean Paul A.K.A el_vete Sep 22 '17 at 20:30
http://jqfundamentals.com/chapter/jquery-basics @Chris22 Please refer to this paragraph " 1 2 // Expose jQuery to the global object window.jQuery = window.$ = jQuery; When you call the $() function and pass a selector to it, you create a new jQuery object. Of course, in JavaScript, functions are objects too, so that means that $ (and jQuery, of course) has properties and methods, too .." – Jean Paul A.K.A el_vete Sep 22 '17 at 20:40
all position didn't work for my case, this scripting work. – Ariwibawa Feb 25 '21 at 09:40

score 11 · Answer 5 · answered Mar 15 '13 at 05:13

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 '13 at 05:13

Mike

1,161
1
14
24

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 Jun 03 '14 at 14:55
This one makes sense a lot. Thank you. – hsuk May 09 '17 at 18:31

score 8 · Answer 6 · answered Apr 10 '15 at 23:09

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

answered Apr 10 '15 at 23:09

Derek Gogol

1,198
15
15

This must be in top! Thank you – Igor Rebega Aug 22 '18 at 13:12

score 7 · Answer 7 · answered Aug 02 '13 at 14:18

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 02 '13 at 14:18

Eduardo Cuomo

13,985
3
93
80

I think you need $(w). Plus, this doesn't seem to deal with scrolling in the browser. – Chris Prince Aug 18 '15 at 06: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 Paul A.K.A el_vete Sep 22 '17 at 02:21

score 6 · Answer 8 · answered May 14 '14 at 02:16

6

Try this....

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

answered May 14 '14 at 02:16

Rikin Patel

7,983
7
66
73

score 5 · Answer 9 · answered Nov 09 '15 at 14:51

5

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 09 '15 at 14:51

okki

111
2
9

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 Jul 12 '16 at 20:00

score 4 · Answer 10 · edited Jun 15 '17 at 09:35

4

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 '17 at 09:35

Rikin Patel

7,983
7
66
73

answered Feb 21 '14 at 06:01

r-arun-r

79
1
7

Works **perfectly** in IE11 with jQueryUI 1.11.4 – Johnny Bones Jul 07 '16 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 Paul A.K.A el_vete Sep 22 '17 at 02: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 May 20 '21 at 13:42

score 4 · Answer 11 · answered Dec 15 '14 at 13:14

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 '14 at 13:14

thedrs

1,302
10
27

This solution worked for me. – Amit Garg Mar 24 '21 at 08:31

score 4 · Answer 12 · answered May 15 '15 at 02:54

4

Following position parameter worked for me

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

Good luck!

answered May 15 '15 at 02:54

Rakesh Prajapati

750
5
13

score 3 · Answer 13 · answered Dec 20 '12 at 10:57

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

score 2 · Answer 14 · edited Nov 13 '12 at 22:13

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 '12 at 22:13

Jean-François Corbett

34,562
26
126
176

answered Nov 13 '12 at 21:49

John

21
1

score 2 · Answer 15 · answered Jun 14 '13 at 13:39

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 '13 at 13:39

Aneesh Vijendran

3,476
2
26
45

score 2 · Answer 16 · answered Jun 14 '13 at 22:25

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 '13 at 22:25

gekido

31
3

gekido: Are you suggesting to use this method? – Jean Paul A.K.A el_vete Jun 03 '15 at 15:21
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 May 03 '16 at 23:19

score 2 · Answer 17 · edited Jun 15 '17 at 09:35

2

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

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

edited Jun 15 '17 at 09:35

Rikin Patel

7,983
7
66
73

answered Jul 22 '13 at 14:20

Nikolay

21
1

score 2 · Answer 18 · answered Apr 14 '17 at 11:34

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

score 2 · Answer 19 · answered Jan 23 '12 at 17:13

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 '12 at 17:13

Ioannis Suarez

459
5
5

score 0 · Answer 20 · answered Feb 14 '14 at 04:18

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 '14 at 04:18

Liko

1,910
17
19

score 0 · Answer 21 · edited Jun 15 '17 at 09:36

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 '17 at 09:36

Rikin Patel

7,983
7
66
73

answered May 30 '14 at 22:45

SwellBuilt

11

How can I position my jQuery dialog to center?

21 Answers21

Linked

Related