jQuery mobile popup not appearing in center

Question

I am using jQuery mobile and trying to show jQuery pop on page load. But when the page is loaded popup is not appearing in center, instead popup's TOP LEFT corner is appearing in center.

But as soon as browser window size gets change popup automatically shifts to center (Even if I press F12 for developers tool). And then all frequent calls to $('#popupBasic').popup("open"); make it to appear in center of the screen.

But first time top left corner of the popup box appearing in center.

Answer 1

$(document).on("popupafteropen", function() {
    $('#popup').popup('reposition', 'positionTo: window');
});

You can use the custom pop up events to reposition it after opening

Answer 2

You may try repositioning the popup on pageshow:

$( '#popupLogin' ).popup( 'reposition', 'positionTo: window' );

I reckon what you are experiencing is down to the positioning happening prior the page is fully drawn by the browser. You can overcome this by repositioning the popup like this:

$(document).on('pageshow', '.selector', function(){
  $('#popupBasic').popup('reposition', 'positionTo: window');
});