Javascript PopUp Window

Creating a pop-up window with javascript is easier than most people think. It takes just a short snippet of code to achieve it. Keep in mind that pop-up windows have to be wisely used. They can be highly irritating for users if misused. Let’s look at a proper and easy way of creating them.

Javascript:

This is the basic code for opening a pop-up window:


onclick="window.open('pop.html','pop','height=250,width=350,scrollbars=no');


A quick dissection of the code above to explain what the different values mean:

• pop.html – This is the document you want to be loaded into the popup window
• pop – Name of the window if we need to use it for other things later.
• Height & width – The height and width of the pop-up window.
• scrollbars – Specifies if you want to have a scrollbar in the window or not, values can be yes and no

HTML:

Let’s use this code in an actual link to create a pop-up window:


<a onclick="window.open('pop.html','pop','height=250,width=350,scrollbars=no')">Link</a>


The above code looks ok, but it’s not valid. All anchor tags (<A>), must have a HREF attribute to be valid.
So let’s put the same link into the HREF:


<a href="pop.html" onclick="window.open('pop.html','pop','height=250,width=350,scrollbars=no')">Link</a>


This is working, but now the page loads into both the popup window and the main window. So we need to disable the link in the HREF somehow while still having it in there for validation. Javascript comes to the rescue again, return(false) will disable the link in the HREF:


<a href="pop.html" onclick="window.open('pop.html','pop','height=250,width=350,scrollbars=no'); return(false);"> Link </a>