April 16, 2004
How to Make a Pop-up Window
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:
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:
a. First determine the size and other attributes of your popup window.
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
d. Link to your popup with the following code:
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.
Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!