Tutorial Blog – Online Free Tutorial Free online Tutorial blog

How to Make a Javascript Pop Up Window

Here is a simple easy to understand Javascript pop up window code. Below is the code for the Javascript pop up window. You will place this Javascript above the link for the pop up window. You can place it in the Head Tag or in the Body Tag right above the link.

<script>
var newwindow;
function recipe(url)
{
newwindow=window.open (url,'name','height=450,width=525,resizable=yes,

scrollbars=yes');
if (window.focus) {newwindow.focus()}
}
</script>

<p>
View <a href="javascript:recipe('/recipes/lamb-teriyaki-kabobs.html');">Lamb Teriyaki Kabobs</a> as recipe card
</p>

Here is an explanation of what is happening in the Javascript pop up window. The 'var newwindow;' creates a variable called 'newwindow'. This appears again later inside the 'function'. Inside the 'function' we give all the attributes like the width and height. The function is called 'recipe' and this will be used in the actual link for the Javascript pop up window. The href in the anchor tag calls the Javascript and function then directs toward whatever file you want to pop up.

Here is some code to make print and close functions. Often times we would like people to have the freedom to print straight from the Javascript pop up window. Also the ability to close the Javascript pop up window inside the window is very functional and important for users. These are to be placed in the document to be inside the Javascript pop up window.

<a href="javascript:printWindow()">Print</a>
<a href="javascript:window.close();">Close Window</a>