jump to contentsacramento state - leadership begins here  
sac state homeadmissionsabout sac stategiving a giftsite indexcontact us

Tutorials - JavaScript Popup Window

Sometimes it is more convenient to have a separate browser window pop up (appear) when a visitor clicks a link, especially if you are providing additional information like a brief course description.

Step 1

Copy the following JavaScript and paste it into the <head> section of your HTML document. The attributes of the new window are: width, height, resizable, scrollbars, menubar and status.

<script language="JavaScript" type="text/javascript">
<!--

function displayWindow(url, width, height) {
var Win = window.open(url,"displayWindow",'width=' + width + ',height=' + height + ', resizable=yes,scrollbars=yes,menubar=yes,status=yes' ); }

//-->
</script>

Step 2

Change the attributes of the new window in the JavaScript above. Here is the text from above, now in bold, that you can change. If you do not want one of these attributes to appear, simply change the 'yes' to 'no'.

resizable=yes,scrollbars=yes,menubar=yes,status=yes

Step 3

 

In the <body> section of your HTML document, code your hyperlink HTML tag like the following example. Remember to change the link address, the width and height of your window, and the text for your link (in bold).

<a href="javascript:displayWindow('sample/csc_258.htm',500,250)" title="a new window will open on click">
CSC 258</a>

Example

This sample popup window also uses the Close Window JavaScript button.

CSC 258

last reviewed: January 25, 2008