How can I center this JQuery dialog?

Question

I was using a JQuery dialog like this: $(thisDialog).dialog(); until I learned that it doesn't like IE9 Quirks mode and doctype strict is not an option because of legacy code, how can I center the popup from this example?

http://jsfiddle.net/46jYC/3/

faerin · Accepted Answer · 2014-07-22T20:17:18.340

1

A jQuery solution, considering the modal-dialog is position absolute/relative/fixed:

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var boxHeight = $('.modal-dialog').height();
var boxWidth = $('.modal-dialog').width();
$('.modal-dialog').css({'left' : ((windowWidth - boxWidth)/2), 'top' : ((windowHeight - boxHeight)/2)}); //change selector to whatever your selector is :)

A jQuery solution, considering the modal-dialog is not position absolute/relative/fixed:

css:

margin-left: auto;
margin-right: auto;

jquery:

var windowHeight = $(window).height();
var boxHeight = $('.modal-dialog').height();
$('.modal-dialog').css({'margin-top' : ((windowHeight - boxHeight )/2)});  //change selector to whatever your selector is :)

edited Jul 22 '14 at 20:17

answered Jul 22 '14 at 16:57

faerin

1,915
17
31

i would suggest cache the DOM elements to enhance its performance.. example :-$('.modal-dialog') we are using this in code multiple time so we should cache it like var modalDialog=$('.modal-dialog'); now we can use modalDialog instead of $('.modal-dialog') so it will be faster (its a good practice ) thanks – Devendra Soni Jul 22 '14 at 17:05
the $(window).height() was returning zero, but if i manually give it the left and top css values it works good. Thanks! – patrick Jul 22 '14 at 17:08
@patricik, the `$(window).height()` should not return 0. Try to put the code snippet within `$(document).ready(function(){//code here});` and you will have the the dialog's position calculated dynamically for all kinds of window sizes. – faerin Jul 22 '14 at 17:44
@entiendoNull I'm in quirks mode so I needed to use this trick to get the height http://stackoverflow.com/a/11744120/73804 – patrick Jul 22 '14 at 18:26

score 0 · Answer 2 · edited Jul 22 '14 at 17:02

You should write something like this:

function abrirPopup(url,w,h) {
    var newW = w + 100;
    var newH = h + 100;
    var left = (screen.width - newW) / 2;
    var top = (screen.height - newH) / 2;
    var newwindow = window.open(url, 'name', 'width=' + newW +
            ',height=' + newH + ',left=' + left + ',top=' + top);
    newwindow.resizeTo(newW, newH);

    //posiciona o popup no centro da tela
    //(position the popup in the center of the canvas)
    newwindow.moveTo(left, top);
    newwindow.focus();
    return false;
}

HTML:

<a href="#" onclick="return abrirPopup('http://www.google.com.br', 500, 400)">Google</a>

How can I center this JQuery dialog?

2 Answers2