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.
html
<!DOCTYPE html><html> <head> <title> Non-centered popup window on the screen </title> </head><body> <h1>neveropen</h1> <p> Non-centered 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> 'neveropen Website', 1200, 650);"> neveropen </button></body></html> |
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.
html
<!DOCTYPE html><html> <head> <title> Centered popup window on the screen </title> </head><body> <h1>neveropen</h1> <p> Centered 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> 'neveropen Website', 1200, 650);"> neveropen </button></body></html> |
Output:
- Before Clicking the button:
- After Clicking the button:
