April 16, 2004

How to Make a Pop-up Window

Sometimes you might want to link to a popup window from your Movable Type weblog. For example you can make your About page a popup instead of a separate page. Although using the target="blank" attribute in a hyperlink can generate a new page, using javascript commands for popups will give you more control over the appearance and location of the popup.

Movable Type already uses popups. You can create a link to an image file that will create a popup of the image when clicked (see Uploading Images and Photos). There is javascript code in the default headers of your index and archive templates for OpenComments and OpenTrackback that can be used to invoke comment and trackback popup windows.

There are two basic ways of creating popups.

1. Using the onclick= attribute in a hyperlink. This is the easiest way to point to a popup and is what is used by MT in its image popups.

a. Create the html or php page containing the content or form that you want to see as your popup. You can save this as an index template in your MT templates, or as a completely separate file.

b. Determine the size of the popup window you want, and where on the screen you want it to appear. Size is measured in pixels, and location is measured in pixels from the upper left corner of the screen. Determine if you want menu or status bars to appear in your popup and if you want the window to be scrollable and resizable.

c. Link to your popup by including the onclick attributes in the <a href tag like so:

Replace the www.yourweblog.com/yourfile.html with the URL for the file you want to popup. For example, here is the code I use to popup an About page:

2. Invoke Javascript commands from your header. This is the second way to do popups and is a little more involved, but more efficient if you are going to be using a particular style of popup frequently.

a. First determine the size and other attributes of your popup window.

b. Pick a name for your Javascript function that will call open this popup, for example OpenPopup.

c. Place the following Javascript code in the header section of both the Main Index template and the Individual Entry Archive template (and any other templates that will invoke the popup).

function OpenPopup (c) {

If you want, replace OpenPopup with another name that you've chosen. Change the width and height and other attributes to suite your needs.

Be sure to place the code between the
<script type="text/javascript" language="javascript">

and the

//--> </script>
tags with the other Javascript functions. (If you do a "view source" from your browser on this page you can see where I've placed this function in the header).

d. Link to your popup with the following code:

<a href="http://www.yourweblog.com" onclick="OpenPopup(this.href); return false">Click Here to See Popup</a>

Replace http://www.yourweblog.com with the URL you want to popup. Replace OpenPopup with the name you chose in step 2b for your Javascript script. Replace Click Here to See Popup with the text you want to appear on the link.

For example, <a href="http://www.elise.com" onclick="OpenPopup(this.href); return false">Click Here to See Popup</a> yields Click Here to See Popup.

Note that the popup may not work properly in the MT Preview Entry mode, but works when actually published. Also, it took me about 2 hours of troubleshooting to find that I needed to have the Javascript script code on both the Main Index and the Individual Entry Archive templates for the popup to work. If the code was only on the Individual Entry Archive template, the link did not generate a popup, but acted like a regular link.

Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Posted by Elise Bauer on April 16, 2004 to HTML and Javascript
| Email to a friend | Printer-friendly version

Email to a friend

Email this article to:

Your email address:

Message (optional):