Center Pop-up window

[FinTheHuman]

Hi guys! 

I have a pop-up window in my report page, and when I clicked it -> the window always positioned in the far right part of the screen. 

This is the current code I use:

<a class="workorder" href="#" onclick="window.open("https://www.google.com/","mywindow", "menubar=1,resizable=1,width=750,height=950")">Google</a>

I want it to be displayed in the center. 

Can you please help me with this? 

Thank you in advance.

[Aether]

Hello @FinTheHuman,

You can try to use this custom code to center your pop-up window:

<script language="javascript" type="text/javascript">
        function OpenPopupCenter(pageURL, title, w, h) {
            var left = (screen.width - w) + 1350;
            var top = (screen.height - h) / 10;  
            var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', left=' + left +', top=' + top);
        } 
</script>

<button onclick="OpenPopupCenter('http://www.google.com', '', 800, 1000);">Go to Google</button>

You can change the following data in this line of code:

You can try this sample URL for testing: https://c1abv183.caspio.com/dp/482760007ae3812e935c495e9514

I hope this helps  

~WatashiwaJin~

[Aether]

By the way, you can also refer to another online article like StackOverflow for this kind of questions.

Look at this article for the popup screen:

https://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen

 

[kpcollier]

Following the topic on Stack Overflow, I used the Dual Screen method that got a lot of love. For some reason, it refreshes the parent page when you click the popup button. Any idea why? 

function PopupCenter(url, title, w, h) {
    // Fixes dual-screen position                         Most browsers      Firefox
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;

    var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var systemZoom = width / window.screen.availWidth;
var left = (width - w) / 2 / systemZoom + dualScreenLeft
var top = (height - h) / 2 / systemZoom + dualScreenTop
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w / systemZoom + ', height=' + h / systemZoom + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus) newWindow.focus();
}

 

[BaySunshine]

Hi @FinTheHuman,

Add left and top  features to your code and you should be able to place it anywhere on the window.

<a class="workorder" href="#" onclick="window.open("https://www.google.com/","mywindow", "menubar=1,resizable=1,width=750,height=950, top=150, left=500")">Google</a>

I hope this helps.

[kpcollier]

Still cannot find a reason for the Dual Screen Center script reloading the parent page upon click of the popup button. Anyone have any idea?

[cheonsa]

Hello!

Just wanted to share with you this new video from Caspio wherein they illustrate how to use modal in your applications: 

Instead of pop up, you can use modal for a better display.