Popups
Despite the notoriety that popups have received over the year, they have their uses. They are extremely useful for displaying small amounts of extra information and as an area where the user can enter some data external of the main page. But first, a word of caution - use popups with care - popups are very distracting for the user and they will leave if they are pestered a lot. Another point to keep in mind is that many users would have installed some kind of popup blockers - so your popup could fail.
That said, let us continue with our lesson. Let's create a popup.
Open Popup
Code : window.open("pop.html", "popup_id", "scrollbars,resizable,width=200,height=400,");
As the above examples indicate, popups can be controlled by the originating window. Just get the value that is returned by the 'window.open' function - this value can be used as an ID when controlling that popup. The code given below describes that method I used to make this effect.
var popup; //A global variable that will act as the Popup ID
function makeExternalPopup() {
//Create the popup and store the returning id in the variable
popup = window.open("pop.html", "popup_id",
"scrollbars,resizable,width=300,height=400");
}
function getData() {
//Check for the existence of the popup before doing anything
if(!popup) {
alert("Please create the popup first.");
return;
}
//Access the popup elements using this ID and fetch data from it
var data = popup.document.getElementById('popup_data').value;
document.frm.txt.value = data;
}
function putData() {
//Check for the existence of the popup before doing anything
if(!popup) {
alert("Please create the popup first.");
return;
}
//Access the popup elements using this ID and put data into it
var data = document.frm.txt.value;
popup.document.getElementById('popup_data').value = data;
}
Creating the popup
popup = window.open("pop.html", "popup_id", "scrollbars,resizable,width=300,height=400");'popup' is the variable used to store the ID of the created popup. Get this value when opening a popup if you want to control it later.
window.open() | The code that opens the popup | ||||||||
| "pop.html" | The first argument(pop.html) is the name of the file to be opened in the newly created window. Click here to open the file a new window. | ||||||||
| "popup_id" | The ID of the newly created popup - this can be used to access the popup latter in the script. | ||||||||
| Options |
The final argument is a comma separated list of options. In our case it is...scrollbars,resizable,width=300,height=400Which means..
|
The options that can be passed to the popup is not limited to the four given above. The most used options are given below. As said before these options are to be given in the format OPTION_1_NAME=VALUE,OPTION_2_NAME=VALUE and so on. For example height=400,width=200.
| height | Specifies the height of the window in pixels. |
| width | Specifies the width of the window in pixels. |
| location | If yes, creates a Location entry field. |
| menubar | If yes, creates the menu at the top of the window. |
| resizable | If yes, allows a user to resize the window. |
| scrollbars | If yes, creates horizontal and vertical scrollbars when the Document grows larger than the window dimensions. |
| status | If yes, creates the status bar at the bottom of the window. |
| toolbar | If yes, creates the standard browser toolbar, with buttons such as Back and Forward |
Dynamic Popups
In the previous example we created a popup of an existing file - "pop.htm". But there are times when we want to use custom data to create a popup. Lets look at an example...
The code I used to create the effect is given below.
function createPopup() {
//Get the data from the form fields
var background = document.custom.back.value;
var title = document.custom.title.value;
var text = document.custom.text.value;
//Now create the HTML code that is required to make the popup
var content = "<html><head><title>"+title+"</title></head>\
<body bgcolor='"+background+"'><h1>"+title+"</h1>"+text+"<br />\
<a href='javascript:window.close()'>Close the popup</a></body></html>";
//Create the popup
var popup = window.open("","window","resizeable,width=400,height=300");
popup.document.write(content); //Write content into it.
popup.document.close();
}
What we do in the 'createPopup' function is that we make a string(in our case, the 'content' string) that holds the html code of the popup that is to be made. Insert all the needed data into this script. Now create the popup using the same technique we used earlier. Then write the string into the popup using the code popup.document.write(content);.