Jump to content
Sign in to follow this  
FinTheHuman

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.

Share this post


Link to post
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);
        } 
</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:

image.png.37746e08d2e0f460915109098b7ee017.png

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

I hope this helps :) 

~WatashiwaJin~

Share this post


Link to post
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();
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
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.

Loading...
Sign in to follow this  

×
×
  • Create New...