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

Question

I created a simple popup in jQuery, and almost everything seems to work fine except for the on load in the infoPopupLoadResize() function. I'm not sure why it isn't firing on page load, but does work on resize.

The purpose of the infoPopupLoadResize() function is to calculate the width and height of the popup, and then apply a negative top margin and negative left margin to center the position.

Could it perhaps be a timing issue? I tried using setTimeout for calling the function infoPopupOpen() to make sure the popup was loaded on the page to call infoPopupLoadResize() before opening the popup, but that didn't seem to work either.

Here is a JSFiddle of my work: 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

You try to get information when the window is load or resize, ok but before you need to check if the popup is open, i just modify the last function :

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

After, you can check if the window is resize :)

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

Answer 2

It's

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

Window load has happened a little while ago as window is not your popup but the browser window.

You can fix this by always executing this function when your popup is being opened

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

and

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