jQuery和CSS在屏幕中心设置一个绝对div(检测屏幕的分辨率)

Question

我想创建一个包含登录表单（或其他功能）的新层，并将其显示在屏幕中心（取决于屏幕的分辨率和内容）。

这是代码：

  function new_layer() {
    $('#frameContainer, #showbox').show();
    $('#showbox').load('includes/login.php');
    $(document).ready(function(){
        var hei = eval($(window).height()/2 - $('#showbox > *').outerHeight()/2);
        var wid = eval($(window).width()/2 - $('#showbox > *').outerWidth()/2);
        $('#showbox').css({
          top: hei + "px",
          left: wid + "px"
        }).show();
    });
    // ..................

第一次，它不起作用，文件login.php的内容居中：（，但当我单击外部隐藏它，然后再次单击时，它起作用。当我刷新页面时，问题再次出现。

问题出在哪里？我该怎么解决？

Answer 1

您不需要JS计算：

#loginDialog {
    height: 300px;
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px; /* half of the height */
    margin-left: -200px; /* half of the width */
}

Answer 2

$(function(){
var loginDialog = $('#loginDialog');
    $.blockUI();
    var dlgWidth = loginDialog.outerWidth();
    var viewPortWidth = $(window).width();
    var pos = (viewPortWidth - dlgWidth ) / 2;
    loginDialog.css({
        'position', 'absolute',
        'left' :  pos + 'px',
        'z-index' : '1999' //greater than setting for blockUI
    });
});

有关blockUI的更多信息，请点击此处