JavaScript window.open() method is used to open a popup window. This popup window will be placed in the center of the screen.
- popupWinHeight: The height of the pop-up window on the screen.
- popupWinWidth: The width of the pop-up window on the screen.
This example creates the pop-up window without placing it into the center.
<!DOCTYPE html>
<html>
<head>
<title>
Non-centered popup window
on the screen
</title>
</head>
<body>
<h1>CodeConfig.in sample code </h1>
<p>
Non-centered popup window
on the screen
</p>
<script>
function createPopupWindow(pageURL, pageTitle,
popupWinWidth, popupWinHeight) {
let left = (screen.width);
let top = (screen.height);
let myWindow = window.open(pageURL, pageTitle,
'resizable=yes, width=' + popupWinWidth
+ ', height=' + popupWinHeight + ', top='
+ top + ', left=' + left);
}
</script>
<button onclick="createPopupWindow('https://codeconfig.in',
'CodeConfig.in Website', 1250, 750);">
CodeConfig.in
</button>
</body>
</html>How to open popup window at Center:
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
Below example creates the popup window and placing it into center.
<head>
<title>
Centered popup window
on the screen
</title>
</head>
<body>
<h1>codeconfig.in sample Code </h1>
<p>
Centered popup window
on the screen
</p>
<script>
function createPopupWindow(pageURL, pageTitle,
popupWinWidth, popupWinHeight) {
let left = (screen.width - popupWinWidth) / 2;
let top = (screen.height - popupWinHeight) / 4;
let myWindow = window.open(pageURL, pageTitle,
'resizable=yes, width=' + popupWinWidth
+ ', height=' + popupWinHeight + ', top='
+ top + ', left=' + left);
}
</script>
<button onclick="createPopupWindow('https://codeconfig.in',
'CodeConfig.in Website', 1250, 750);">
CodeConfig.in
</button>
</body>
</html>