Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to 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.
8K+ Views
