jquery - 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 的信息在这里