How To Center Popup Window With JavaScript

There was a time when I wanted the contact form of a website to be popped up in another window. I was able to pop up the window but it was not centered on the screen.

For me, it looks better when the window popup is at the center of your screen. So I found a way to do that. Today we're going to:

1. Create a file with a button and trigger the centered popup window (index.php)

2. Create a file that will serve as the popup window (contact_form.php)

<html>
   <head>
      <title>How To Center Screen Pop Up Window With JavaScript</title>
   </head>
<body>


<h3>Please click the button below</h3>


<!-- We will use a button to trigger the pop up window -->
<input type='button' value='Contact Us' onclick="showcontactusform()" align="center" /> 


<script type='text/javascript'>
   function showcontactusform() {
      //set the width and height of the 
      //pop up window in pixels
      var width = 500;
      var height = 500;
  
      //Get the TOP coordinate by
      //getting the 50% of the screen height minus
      //the 50% of the pop up window height
      var top = parseInt((screen.availHeight/2) - (height/2));
  
      //Get the LEFT coordinate by
      //getting the 50% of the screen width minus
      //the 50% of the pop up window width
      var left = parseInt((screen.availWidth/2) - (width/2));
  
      //Open the window with the 
      //file to show on the pop up window
      //title of the pop up
      //and other parameter where we will use the
      //values of the variables above
      window.open('contact_form.php', 
            "Contact The Code Ninja", 
            "menubar=no,resizable=no,width=500,height=500,scrollbars=yes,left="  
            + left + ",top=" + top + ",screenX=" + left + ",screenY=" + top);    
      }
</script>  
</body>
</html>

That's it! :)

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.