1. Create a file with a button and to trigger the centered pop up window (index.php)
2. Create a file which will serve as the pop up 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! :)
For FREE programming tutorials, click the red button below and subscribe! :)
website