Sometimes you might want to link to a popup window from your blog. 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.
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.
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).
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:
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.
Note that you need 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 will not generate a popup, but will act like a regular link.
Links:
Automated popup generator
