Previous
Moving Stuff around 
Next
Some JavaScript Concepts 
Advanced JavaScript Tutorial
Popups

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=400
Which means..
scrollbarsThe created popup will have scrollbars. These options can be given in the format scrollbars=yes or scrollbars=no. But I just used the short version.
resizableThe popup will be resizable.
widthThe width of the newly created popup in pixals
heightThe height of the popup

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.

heightSpecifies the height of the window in pixels.
widthSpecifies the width of the window in pixels.
locationIf yes, creates a Location entry field.
menubarIf yes, creates the menu at the top of the window.
resizableIf yes, allows a user to resize the window.
scrollbarsIf yes, creates horizontal and vertical scrollbars when the Document grows larger than the window dimensions.
statusIf yes, creates the status bar at the bottom of the window.
toolbarIf 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...

Background
Title
Text
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);.

Previous
Moving Stuff around 
Next
Some JavaScript Concepts 
blog comments powered by Disqus