Center a Popup Window on Screen Using JavaScript

In this tutorial, we will learn to center a popup window on the screen using JavaScript. Programmers often need to open a new popup window to show another webpage without redirecting the user to the other webpage. In this situation, developers use the window.open() method to open the new browser window.

Also, we can style the popup window and set the height and width. Also, we can change the position of the popup window to look it better.

Sample Popup Window

In this section, we will create a sample popup window to get familiar with the how window.open() method works. Also, we will learn to set the attributes for the window.open() method to make it better.

Syntax

Users can follow the below syntax to use the window.open() method.

newWindow = window.open(url, 'popUpWindow', 'height=' + height + ', width=' + width + ', resizable=yes, scrollbars=yes, toolbar=yes');

Parameters

  • URL ? It is the URL of the webpage, which will be opened in the popup window of the browser.

  • Height ? It sets the height for the popup window.

  • Width ? It sets the width for the popup window.

  • Resizable ? It allows to resize the popup window.

  • Scrollbars ? It shows the scrollbar inside the popup window, if content inside the window is greater than the window size.

Example

In the below example, we have created the button. When the user clicks on the button, it will call a function named openPopUp(). In the openPopUp() function, we have implemented the window.open() method, which opens the home page of the TutorialsPoint site in the new window.


<html>
<head>
</head>
<body>
   <h2> Center the popup window using the JavaScript. </h2>
   <h4> Click the button to open popup window at top left corner. </h4>
   <button style=" height : 30px; width: 200px; " onclick = "openPopUp()"> click to open popup </button>
   <script>
      // function to open the popup window
      function openPopUp() {
         let url = "https://www.tutorialspoint.com/index.htm";
         let height = 600;
         let width = 1200;
         newWindow = window.open( url, 'popUpWindow', 'height=' + height + ', width=' + width + ', resizable=yes,scrollbars=yes,toolbar=yes' );
      }
   </script>
</body>
</html>

In the above output, when users click on the button, it will open the popup window in the top left corner.

Center the Popup Window

We have learned the basic things about the popup window. Now, we will set the attributes in such a way so that users can see the popup window at the center of the screen. By default, a popup window appears at the top left corner of the screen.

We will set the left and top positions for the popup window, which will make it appear in the center.

Syntax

Users can follow the below syntax to the window.open() method to add left and top attributes into that.

// set the horizontal center of the popup window the center of the screen.
var left = ( screen.width- width_of_popup_window ) / 2;
// set thevertical center of the popup window the center of the screen.
var top = ( screen.height -height_of_popup_window ) / 2;
var newWindow = window.open( url, "center window",
   'resizable=yes, width=' + width
   + ', height=' + height + ', top='
   + top + ', left=' + left);

Parameters

In the above method, we have added two new parameters

  • Left ? It sets starting left position of the window.

  • Top ? It sets the starting top position of the popup window.

  • Screen.width ? It returns the screen width in the pixels.

  • Screen.height ? It returns the screen height in the pixels.

Example

In the below example, we have added the left and top attributes to the window.open() method and give proper values to make the popup window center.


<html>
<head>
</head>
<body>
   <h2> Center the popup window using the JavaScript. </h2>
   <h4> Click the button to open popup window at center. </h4>
   <button style = " height:30px; width:200px; " onclick = "openPopUp()"> click to open popup </button>
   <script>
      // function to open the popup window
      function openPopUp() {
         let url = "https://www.tutorialspoint.com/index.htm";
         let height = 300;
         let width = 700;
         var left = ( screen.width - width ) / 2;
         var top = ( screen.height - height ) / 2;
         var newWindow = window.open( url, "center window", 'resizable = yes, width=' + width + ', height=' + height + ', top='+ top + ', left=' + left);
      }
   </script>
</body>
</html>

When users click on the button to open the popup window, it will appear in the middle of the devices screen.

We have learned to center the popup window using JavaScript only. It is just as simple as we need to add the left and top attributes to the window.open() method. Also, we can add many other attributes to window.open() method to make it more functional.

Updated on: 2022-08-02T10:01:33+05:30

11K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements