Как я могу центрировать этот диалог JQuery?

Я использовал такой диалог JQuery: $(thisDialog).dialog(); пока не узнал, что ему не нравится режим Quirks IE9, а строгий тип документа не подходит из-за устаревшего кода, как я могу центрировать всплывающее окно из этого примера?

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


jquery quirks-mode
person patrick    schedule 22.07.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Решение jQuery, учитывая, что модальный диалог имеет абсолютную/относительную/фиксированную позицию:

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

Решение jQuery, учитывая, что модальный диалог не является абсолютным/относительным/фиксированным положением:

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 :)
person entiendoNull    schedule 22.07.2014
comment
я бы предложил кэшировать элементы DOM для повышения его производительности. Пример: -$('.modal-dialog') мы используем это в коде несколько раз, поэтому мы должны кэшировать его, как var modalDialog=$('.modal-dialog' ); теперь мы можем использовать modalDialog вместо $('.modal-dialog'), так что это будет быстрее (это хорошая практика) спасибо - person Devendra Soni; 22.07.2014
comment
$(window).height() возвращал ноль, но если я вручную задаю ему левое и верхнее значения css, он работает хорошо. Спасибо! - person patrick; 22.07.2014
comment
@patricik, $(window).height() не должен возвращать 0. Попробуйте поместить фрагмент кода в $(document).ready(function(){//code here});, и вы получите динамическое вычисление позиции диалога для всех видов размеров окон. - person entiendoNull; 22.07.2014
comment
@entiendoNull Я нахожусь в режиме причуд, поэтому мне нужно было использовать этот трюк, чтобы получить высоту stackoverflow.com/a/11744120/73804 - person patrick; 22.07.2014

arrow_upward
0
arrow_downward

Вы должны написать что-то вроде этого:

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>
person ivanfromer    schedule 22.07.2014