Jump to content

Center Pop-up window

Recommended Posts

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.

Link to comment
Share on other sites

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

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


Link to comment
Share on other sites

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


Link to comment
Share on other sites

  • 1 month later...
  • 2 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...