Jquery: как я могу настроить модальное диалоговое окно для отображения по центру относительно html вместо тела?

Я использую скрипт, который затеняет фон элементом #mask и центрирует мое сообщение .memError на экране. Проблема в том, что мой сайт стилизует как элементы body, так и элементы html — body имеет фиксированную ширину и центрируется внутри элемента html. Когда я использую приведенный ниже сценарий, сообщения #mask и .memError позиционируются относительно элемента body. Как я могу расположить их относительно html вместо этого?

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({
    'width': maskWidth,
    'height': maskHeight
});

//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("normal", 0.9);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$('.memError').css('top', winH / 2 - $('.memError').height() / 2);
$('.memError').css('left', winW / 2 - $('.memError').width() / 2);

javascript jquery css modal-dialog positioning
person John Stephens    schedule 08.08.2009    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы установили верхнюю и левую позицию на ноль?

$('#mask').css({
 'width': maskWidth,
 'height': maskHeight,
 'left': 0,
 'top': 0
});

но почему бы вам не попробовать плагин blockUI?

person Anwar Chandra    schedule 08.08.2009

arrow_upward
2
arrow_downward

Почему бы не использовать jmodal или другой плагин jquery, который создает модальный диалог для вас?

person Jikhan    schedule 08.08.2009