Javascript PopUp Window
Creating a pop-up window with javascript is easier than most people think. It just takes a short nippet of code to achieve. Keep in mind that pop-up windows have be wisely used. They can be highly irritating for users if used without them in mind.
Give me feedback on this page/code
Javascript:
This is the basic code for opening a pop-up window:
onclick="window.open('pop.html','popup','height=250,width=350,scrollbars=no');
a quick dissection of the code above to explain what the different values means:
- pop.html - This is the document you want to be loaded into the popup window
- popup - 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','popup','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('popup.html','popup','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','popup','height=250,width=350,scrollbars=no'); return(false);"> Link </a>
This should work great. Click this link to test the above code.