Search code examples
jqueryquirks-mode

How can I center this JQuery dialog?

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/

Solution

  • 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 :)