How to create pop-up windows using JavaScript
Pop-up windows are created using JavaScript and display on a webpage after a hyperlink is clicked. They have a variety of uses including displaying full sized photographs, definitions, and advertising.
This article explains how to create a pop-up window and control various aspects, including its size, and whether or not toolbars are displayed. If you only want a hyperlink to appear in a new window, simply use the target= attribute with the value set to _blank in the <a> element itself.
As you're about to see in this article, implementing pop-up windows into a webpage is very easy. Even if you are new to Web development, you are more than likely to have them set up without any difficulty in next to no time.
To begin, open or create a new webpage in the BestAddress HTML Editor or Aurora Web Editor, then insert the following code just between the <head> and </head> elements (tags):
<script language="JavaScript">
|
It is now just a matter of changing the code you just pasted as follows: Replace URL with the address of the webpage to open. WindowName provides a unique name for the window that "pops up". If you wish, you can also specify the width and height of the window and whether or not a toolbar and status bar is visible (for example, you would use 0 for to hide it or 1 to show it).
The above code creates a JavaScript function called OpenWindow. You will need to call this function from within your webpage to make the pop-up window appear when a visitor to your webpage clicks a hyperlink as follows:
<a href="#" onClick="PopupWindow();">
|
You can also use the onClick event for a button using the <input> element.
If you want the pop-up window to appear when a button (as defined by the <input> element) is clicked, simply use the onClick event attribute.
You can create additional pop-up windows by repeating the steps above. However, you will need to differentiate between each JavaScript function. To do this, simply rename each function as you create it, such as "OpenWindow2", "OpenWindow3", and so on. You will also need to supply a different name for the window (instead of WindowName).
