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

Solution 1

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

Solution 2

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

Solution 3

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

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

Solution 4

open: function () {

    var win = $(window);

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

Solution 5

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.

View more solutions

Comments

[Chris Holmes]

Bingo - we have a winner. That was my problem. Thanks!

[space_balls]

excellent! thanks for that. Couldn't work out why it wasn't working

[semmelbroesel]

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

[LosManos]

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

[gamov]

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.

[Jean G.T]

gekido: Are you suggesting to use this method?

[MaVRoSCy]

i liked this solution, in conjunction with window.scrollTo(0, 0); it works great for me +1

[user1527762]

@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?

[Jean G.T]

@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

[Chris Prince]

I think you need $(w). Plus, this doesn't seem to deal with scrolling in the browser.

[isaaclw]

Well, the reason for centering is that sometimes you dynamically load content after the dialog is already loaded.

[Doctor Parameter]

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

[gekido]

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.

[Johnny Bones]

Works perfectly in IE11 with jQueryUI 1.11.4

[Chad]

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

[actaram]

@semmelbroesel $('#myDialog').dialog('widget') and $('#myDialog').parent() both work.

[Jean G.T]

@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 G.T]

@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

[hsuk]

This one makes sense a lot. Thank you.

[Chris22]

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

[Jean G.T]

@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 G.T]

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 G.T]

@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]

+1 because of the within param, which allows docking like on appendTo this element, and if using a modal window allows limiting that docking.

[Chris22]

@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

[Jean G.T]

@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 G.T]

comptechdoc.org/independent/web/cgi/javamanual/javawindow.ht‌​ml

[Jean G.T]

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

[Igor Rebega]

This must be in top! Thank you

[Joe DF]

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

[PiyaModi]

@JoeDF answer works correctly. But it doesn't work in iOS safari. Does anyone have an idea, why?

[Ariwibawa]

all position didn't work for my case, this scripting work.

[ThePhi]

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.