How to center a popup window on screen?

0 0 1 minute read

JavaScript window.open() method is used to open a popup window. This popup window will place into the center of the screen.

popupWinHeight: The height of pop up window on the screen.
popupWinWidth: The width of pop up window on the screen.

Example 1: This example creates the pop up window without placing it into center.

html

<!DOCTYPE html>
<html>
     
<head>  
    <title>  
        Non-centered popup window
        on the screen
    </title> 
</head>
 
<body>
    <h1>zambiatek</h1>
     
    <p>
        Non-centered popup window
        on the screen
    </p>
     
    <script>
        function createPopupWin(pageURL, pageTitle,
                    popupWinWidth, popupWinHeight) {
            var left = (screen.width ) ;
            var top = (screen.height ) ;
            var myWindow = window.open(pageURL, pageTitle, 
                    'resizable=yes, width=' + popupWinWidth
                    + ', height=' + popupWinHeight + ', top='
                    + top + ', left=' + left);
        }
    </script>
     
    <button onclick = "createPopupWin('https://www.zambiatek.com',
            'zambiatek Website', 1200, 650);">
        zambiatek
    </button>
</body>
 
</html>

Output:

Before Clicking the button:
After Clicking the button:

Center popup window: To center the popup window we are changing the values of parameters of open() method as follows:

left = (screen.width – popupWinWidth) / 2
top = (screen.height – popupWinHeight) / 4

Example 2: This example creates the pop up window and placing it into center.

html

<!DOCTYPE html>
<html>
     
<head>  
    <title>  
        Centered popup window
        on the screen
    </title> 
</head>
 
<body>
    <h1>zambiatek</h1>
     
    <p>
        Centered popup window
        on the screen
    </p>
     
    <script>
        function createPopupWin(pageURL, pageTitle,
                    popupWinWidth, popupWinHeight) {
            var left = (screen.width - popupWinWidth) / 2;
            var top = (screen.height - popupWinHeight) / 4;
             
            var myWindow = window.open(pageURL, pageTitle, 
                    'resizable=yes, width=' + popupWinWidth
                    + ', height=' + popupWinHeight + ', top='
                    + top + ', left=' + left);
        }
    </script>
     
    <button onclick = "createPopupWin('https://www.zambiatek.com',
            'zambiatek Website', 1200, 650);">
        zambiatek
    </button>
</body>
 
</html>