How to center a popup window on screen?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>  
    <title>  
        Non-centerd popup window
        on the screen
    </title
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <p>
        Non-centerd 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('http://www.geeksforgeeks.org',
            'GeeksforGeeks Website', 1200, 650);">
        GeeksforGeeks
    </button>
</body>
  
</html>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>  
    <title>  
        Centerd popup window
        on the screen
    </title
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <p>
        Centerd 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('http://www.geeksforgeeks.org',
            'GeeksforGeeks Website', 1200, 650);">
        GeeksforGeeks
    </button>
</body>
  
</html>

chevron_right


Output:

  • Before Clicking the button:
  • After Clicking the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.