How to Center a Popup Window on Screen

JavaScript window.open() method is used to open a popup window. This popup window will be placed in the center of the screen.

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

This example creates the pop-up window without placing it into the center. 

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Non-centered popup window
        on the screen
    </title>
</head>
 
<body>
    <h1>CodeConfig.in sample code </h1>
 
    <p>
        Non-centered popup window
        on the screen
    </p>
 
    <script>
        function createPopupWindow(pageURL, pageTitle,
            popupWinWidth, popupWinHeight) {
            let left = (screen.width);
            let top = (screen.height);
            let myWindow = window.open(pageURL, pageTitle,
                'resizable=yes, width=' + popupWinWidth
                + ', height=' + popupWinHeight + ', top='
                + top + ', left=' + left);
        }
    </script>
 
    <button onclick="createPopupWindow('https://codeconfig.in',
            'CodeConfig.in Website', 1250, 750);">
        CodeConfig.in
    </button>
</body>
 
</html>

How to open popup window at Center:

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

Below example creates the popup window and placing it into center. 

<head>
    <title>
        Centered popup window
        on the screen
    </title>
</head>
 
<body>
    <h1>codeconfig.in sample Code </h1>
 
    <p>
        Centered popup window
        on the screen
    </p>
 
    <script>
        function createPopupWindow(pageURL, pageTitle,
            popupWinWidth, popupWinHeight) {
            let left = (screen.width - popupWinWidth) / 2;
            let top = (screen.height - popupWinHeight) / 4;
 
            let myWindow = window.open(pageURL, pageTitle,
                'resizable=yes, width=' + popupWinWidth
                + ', height=' + popupWinHeight + ', top='
                + top + ', left=' + left);
        }
    </script>
 
    <button onclick="createPopupWindow('https://codeconfig.in',
            'CodeConfig.in Website', 1250, 750);">
        CodeConfig.in
    </button>
</body>
 
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *