Javascript 如何让JS弹出窗口在加载时定位？关于调整作品大小

我在jQuery中创建了一个简单的弹出窗口，除了

infoPopupLoadResize（）

函数中的加载之外，几乎所有功能都正常工作。我不知道为什么它不会在页面加载时启动，但在调整大小时会起作用

infopopuploardesize（）

函数的目的是计算弹出窗口的宽度和高度，然后应用负上边距和负左边距使位置居中

这可能是时间问题吗？我尝试使用

setTimeout

调用函数

infoPopupOpen（）

，以确保在打开弹出窗口之前将弹出窗口加载到页面上以调用

InfoPopuPoAddressize（）

，但这似乎也不起作用

以下是我的一部分工作：

JavaScript:

它是

窗口加载刚刚发生，因为窗口不是您的弹出窗口，而是浏览器窗口

您可以通过在弹出窗口打开时始终执行此功能来解决此问题

/**
 * Information Popup Load/Resize Function
 */
function infoPopupLoadResize(){
    var _Width = $('.infopopup').width();
    var _Height = $('.infopopup').height();

    console.log('Width: ' + _Width + ' Height: ' + _Height);

    $('.infopopup').css({ marginTop: -(_Height/2), marginLeft: -(_Width/2)});
}

及

---

当窗口加载或调整大小时，您尝试获取信息，好的，但在您需要检查弹出窗口是否打开之前，我只修改最后一个函数：

JS:

之后，您可以检查窗口是否已调整大小：）

---

jsfiddle:

我对它进行了测试，效果非常好。谢谢你@hansgoed。您提供的解决方案非常有意义！感谢您在AnTSaSk提供解决方案。

<a href="#" class="triggerpopup" style="margin: 15px;padding: 0 15px;display: block;float: left;height: 35px;color: #fff;font: 13px/35px Arial, Helvetica, Sans-serif;text-decoration: none;background-color: #b33;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;">Open Popup</a>

/* Information Popup Backdrop */
div.infopopupbackdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.75);
    }



/* Information Popup Content */
div.infopopup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: none;
    width: 100%;
    max-width: 500px;

    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
    -moz-box-shadow:    0 0 30px rgba(0, 0, 0, 0.10);
    box-shadow:         0 0 30px rgba(0, 0, 0, 0.10);
    }
    div.infopopup_inner {
        position: relative;
        padding: 25px;
        border: 1px solid #d0d0d0;
        background-color: #fff;

        -webkit-border-radius:  5px;
        -moz-border-radius:     5px;
        border-radius:          5px;
        }
        a.infopopupclose {
            position: absolute;
            top: 10px;
            right: 10px;
            display: block;
            }

$(window).on('load resize', function(){

/**
 * Information Popup Load/Resize Function
 */
function infoPopupLoadResize(){
    var _Width = $('.infopopup').width();
    var _Height = $('.infopopup').height();

    console.log('Width: ' + _Width + ' Height: ' + _Height);

    $('.infopopup').css({ marginTop: -(_Height/2), marginLeft: -(_Width/2)});
}

/**
 * Information Popup Initialize Function
 */
function infoPopupInit(type,message){

    // Call Popup Struction
    infoPopup(type,message);

    // Call Popup Controls
    infoPopupControls();

    // Call Popup Load and Resize
    infoPopupLoadResize();
    $(window).on('resize', infoPopupLoadResize);

    // Call Popup Open
    infoPopupOpen();
}

function infoPopupLoadResize(){

    // On Load and Resize
    $(infoPopupOpen).ready(function(){

        var _Width = $('.infopopup').width();
        var _Height = $('.infopopup').height();

        console.log('Width: ' + _Width + ' Height: ' + _Height);

        $('.infopopup').css({ marginTop: -(_Height/2), marginLeft: -(_Width/2) });
    });
}