How to Center a Pop Up Window

We will show you how to use  window.open() method to open a Pop-Up Window in 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.

[code lang=”HTML”]
<!DOCTYPE html>
<html>

<head>
<title>
Centered pop-up window
on the screen
</title>
</head>

<body>
<h1>WebOCafe</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>

<button onclick = "createPopupWin('https://WebOCafe.com',
'WebOCafe Website', 750, 650);">
WebOCafe!
</button>
</body>

</html>

[/code]