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

Question

我在 jQuery 中创建了一个简单的弹出窗口，除了 infoPopupLoadResize() 函数中的 on load 之外，几乎所有内容似乎都运行良好。我不确定为什么它没有在页面加载时触发，但在调整大小时起作用。

infoPopupLoadResize()函数的作用是计算弹窗的宽高，然后应用负的top margin和负的left margin使位置居中。

会不会是时间问题？我尝试使用 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

是

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

Window 加载发生在不久之前，因为 window 不是您的弹出窗口而是浏览器 window。

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

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

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

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

之后，您可以检查 window 是否调整大小:)

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

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

How do I get JS popup to position on Load? On Resize works

javascript

jquery

javascript-events