JavaScript pop-up windows

In this tutorial I’m going to show you how to create a pop up window using java script. There are many tools to do this but most of them create pop up windows that open when a page loads. These are fine for pop up ads but what do you do when you want to open up a pop up window when a user clicks a link? This tutorial will show you how to write a function to do this.

This will be a function and it will be embedded in a standard java script tag.

<script LANGUAGE="JavaScript">
</script>

Now before we start lets look at the whole source code, then I will explain it all

function launch(){
jim=window.open("http://www.hardwaretutorials.com/","Hardware Tutorials","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")}

Thats the function in full. Lets start at the beginning. The variable name is ‘Jim.’ Inside the window.open part there are all the configurable components of the pop up window. Lets start with the address. In our example I used http://www.microsoft.com but you could relace this with ‘www.yoursite.com’ or ‘information/popuppage.htm’.

The name for the window (the name that will appear before the title appears) for my example is Microsoft. Now is the window settings. You can set the width and the height as well as the top and left margin. You can also choose whether the window is resizable, scrollbars, a menu bar, a tool bar, a status bar and a location bar.

Once you have configured these just put them in a standard tag, in either the body or head tag.

<script LANGUAGE="JavaScript">
function launch(){
jim=window.open("http://www.microsoft.com","microsoft","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")} 
</script>

Thats the full code. Now all you need to do is create a link ‘javascript:launch().’ If you want to change the java script to ‘function whatever()’ instead of function launch(). You must do this if you have more than one pop up scripts on one page as you will need each hyperlink to activate a different pop up script.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.