JQuery: ¿Cómo puedo establecer un diálogo modal para mostrar centrado en relación con HTML en lugar del cuerpo?

Question

Estoy usando un guion que se reorgan el fondo con un #mask elemento y centra mi .memError mensaje en la pantalla. El problema es que mi sitio estiliza tanto el body y el html elementos-- body está en ancho fijo y se centra en el html elemento. Cuando uso el script a continuación, el #mask y .memError Los mensajes están posicionados en relación con el body elemento. ¿Cómo puedo colocarlos en relación con html ¿en cambio?

//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);

Answer 1

¿Has establecido la posición superior y izquierda en cero?

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

Pero, ¿por qué no das? complemento de bloqueo ¿un intento?

Answer 2

¿Por qué no usar JModal u otro complemento jQuery que cree un diálogo modal para usted?