How to Center a Popup Window on Screen
By FoxLearn 2/8/2025 2:23:29 AM 104
You can use JavaScript's window.open() method to create and center a popup window. By setting the correct values for left and top, we can position the window in the middle of the screen.
In this example, the popup window will open at the bottom right corner of the screen, without centering.
<!DOCTYPE html> <html> <head> <title> Non-centered Popup Window </title> </head> <body> <h1>Sample Code Example</h1> <p>This is a non-centered popup window.</p> <script> function createPopupWindow(pageURL, pageTitle, popupWinWidth, popupWinHeight) { let left = screen.width - popupWinWidth; let top = screen.height - popupWinHeight; let myWindow = window.open(pageURL, pageTitle, 'resizable=yes, width=' + popupWinWidth + ', height=' + popupWinHeight + ', top=' + top + ', left=' + left); } </script> <button onclick="createPopupWindow('https://www.example.com', 'Example Website', 800, 600);"> Open Example Website </button> </body> </html>
To Center the Popup Window:
Now, let's adjust the popup window so that it opens at the center of the screen. We'll calculate the left
and top
values as follows:
- left = (screen.width - popupWinWidth) / 2
- top = (screen.height - popupWinHeight) / 3
Here's the updated code to center the popup window:
<!DOCTYPE html> <html> <head> <title> Centered Popup Window </title> </head> <body> <h1>Centered Popup Window Example</h1> <p>This popup window will appear in the center of the screen.</p> <script> function createPopupWindow(pageURL, pageTitle, popupWinWidth, popupWinHeight) { let left = (screen.width - popupWinWidth) / 2; let top = (screen.height - popupWinHeight) / 3; let myWindow = window.open(pageURL, pageTitle, 'resizable=yes, width=' + popupWinWidth + ', height=' + popupWinHeight + ', top=' + top + ', left=' + left); } </script> <button onclick="createPopupWindow('https://www.example.com', 'Example Website', 800, 600);"> Open Example Website </button> </body> </html>
How This Works:
- The popup window opens with the specified size (800px by 600px).
- The calculation
(screen.width - popupWinWidth) / 2
ensures the window is horizontally centered on the screen. - Similarly,
(screen.height - popupWinHeight) / 3
positions it more evenly on the vertical axis.
Now when you click the button, the popup window will appear in the center of your screen.
- How to use sweetalert2
- How to Pass string parameter in an onclick function
- How to format number with commas and decimal in Javascript
- What does 'use strict;' means in Javascript
- How to detect if caps lock is pressed in Javascript
- How to create a Custom Event in Javascript
- How to Check if an Object Has a Property Properly in JavaScript
- How to convert an Uint8Array to string in Javascript
Categories
Popular Posts
Freedash bootstrap lite
11/13/2024
RuangAdmin Template
11/17/2024
AdminKit Bootstrap 5 HTML5 UI Kits Template
11/17/2024
Horizon MUI Admin Dashboard Template
11/18/2024