Question

我在jQuery中创建了一个简单的弹出窗口，除了infoPopupLoadResize()函数中的加载外，几乎所有内容似乎都能正常工作。我不确定为什么它不会在页面加载时触发，但确实可以调整大小。

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

它可能是一个时间问题吗？我尝试使用setTimeout调用函数infoPopupOpen()以确保在打开弹出窗口之前在页面上加载弹出窗口以调用infoPopupLoadResize()，但这似乎无效

这是我工作的JSFiddle： https://jsfiddle.net/pegues/x4qgkLez/

的JavaScript：

jQuery(document).ready(function($){

    $('.triggerpopup').on('click', function(e){
            e.preventDefault();

            infoPopupInit('info','Test<br/>Test<br/>Test');
        });

});



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

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

    // Call Popup Controls
    infoPopupControls();

    // Call Popup Load and Resize
    infoPopupLoadResize();

    // Call Popup Open
    infoPopupOpen();
}



/**
 * Information Popup Structure Function
 */
function infoPopup(type,message){

    // HTML Structure
    var popupHintMarkup = 
        '<div class="infopopupbackdrop"></div>' +
        '<div class="infopopup ' + type + '">' +
            '<div class="infopopup_inner">' +
                '<a href="#" class="infopopupclose">x</a>' +
                '<div class="">' +

                    message + 

                    '<div class="clear"></div>' +
                '</div>' +

                '<div class="clear"></div>' +
            '</div>' +

            '<div class="clear"></div>' +
        '</div>';

    // Prepend to Body
    $('body').prepend(popupHintMarkup);
}



/**
 * Information Popup Controls Function
 */
function infoPopupControls(){

    $('.infopopupbackdrop,.infopopupclose').on('click', function(e){
        e.preventDefault();

        infoPopupClose();
    });

}



/**
 * Information Popup Controls Function: Close
 */
function infoPopupClose(){
    $('.infopopupbackdrop').delay(50).fadeOut(150);
    $('.infopopup').fadeOut(150);

    // Remove Popup after 300ms
    var closePopup = setTimeout(function(){
        $('.infopopupbackdrop,.infopopup').remove();
    },300);
}



/**
 * Information Popup Controls Function: Open
 */
function infoPopupOpen(){
    $('.infopopup').delay(50).fadeIn(150);;
    $('.infopopupbackdrop').fadeIn(150);
}



/**
 * Information Popup Load/Resize Function
 */
function infoPopupLoadResize(){

    // On Load and Resize
    $(window).on('load resize', function(){

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

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

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

HTML：

<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>

CSS：

/* 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;
            }

Answer 1

它＆＃39; S

$(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();
}

Answer 2

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

JS：

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

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

jsfiddle：https://jsfiddle.net/AnTSaSk/gz13rLs7/

如何让JS弹出窗口在Load上定位？在调整大小的工作

2 个答案: