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

$(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 here

Answer 2

你不需要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 */
}

jQuery和CSS设置一个绝对div到屏幕的中心（检测屏幕的分辨率）

2 个答案: