Text Fixer Tools
 

Create Pop-up Windows

How to Use Javascript to Create Popup Windows

If you're in a hurry and quickly have to create a pop-up window for a single link then use the pop-up window generator.

If you can, then use the jQuery popup code instead - it's lot more compact and sturdy. Also jQuery does a great job of reducing the cross-browser problems that often arise when using javascript.

But if you can't use jQuery to integrate the code for pop-up window functionality into your website then use the javascript code below.

Modern Pop-up Windows with Javascript

We'll use a more modern approach and avoid putting the javascript code into the body of your HTML document. We will keep the html and the javascript separate which is a cleaner approach and in a practical sense will make things much easier for you to maintain going forward.

I've configured the code for 3 different size pop-ups but you can add more or change the existing ones easily.

Step 1: Add the css class to any link that you want to act as a pop-up

You can use popup1, popup2, or popup3 for class names as in this html link code example below:

<a href="http://www.textfixer.com/" class="popup2">Javascript Popup</a>

Step 2: Add this javascript to the head or preferably to an external javascript file

Click on the code to select it all and then do your CTRL+C copy magic.

<script type="text/javascript">

	//initialize the 3 popup css class names - create more if needed
	var matchClass=['popup1','popup2','popup3'];
	//Set your 3 basic sizes and other options for the class names above - create more if needed
	var popup1 = 'width=400,height=300,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20';
	var popup2 = 'width=800,height=600,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20';
	var popup3 = 'width=1000,height=750,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=20,top=20';
	
	//When the link is clicked, this event handler function is triggered which creates the pop-up windows 
	function eventHandler() {
			var x = 0;
			var popupSpecs;
			//figure out what popup size, etc to apply to the click
			while(x < matchClass.length){
					if((" "+this.className+" ").indexOf(" "+matchClass[x]+" ") > -1){
						popupSpecs = matchClass[x];
						var popurl = this.href;
					}
			x++;
			}
		//Create a "unique" name for the window using a random number
		var popupName = Math.floor(Math.random()*10000001);
		//Opens the pop-up window according to the specified specs
		newwindow=window.open(popurl,popupName,eval(popupSpecs));
		return false;
	}

	//Attach the onclick event to all your links that have the specified CSS class names
	function attachPopup(){
		var linkElems = document.getElementsByTagName('a'),i;
		for (i in linkElems){
			var x = 0;
			while(x < matchClass.length){
				if((" "+linkElems[i].className+" ").indexOf(" "+matchClass[x]+" ") > -1){
					linkElems[i].onclick = eventHandler;
				}
			x++;
			}
		}
	}

	//Call the function when the page loads
	window.onload = function (){
	    attachPopup();
	}
</script>

Pop-up Windows Examples

If you want to see a working example of this code then check out the Pop-up Windows Examples Page.

NOTE: I've only tested this on modern browsers so your results may vary on Internet Explorer 8 or any of those older browsers but they should fall back gracefully and use the href destination link if a pop-up is not generated.

The Most Popular Tools

The Newest Tools