PopupWindow

PopupWindow is a simple alternative to LightBox. It is actually based on the Websplash code. The popup window can contain code or an image.

Usage

Save the attached javascript files and add the following to the head of your html:

<script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/effects.js"></script> <script type="text/javascript" src="popup.js"></script>

Import the css. For example:

<link rel="stylesheet" href="popup.css" />

Add the following to the bottom of the HTML:

<div id="mask" style="display: none;"> </div>

Add the window code (which will be hidden until called - this is good for pre-loading images):

<div class="PopupWindow" id="photo1" style="display:none;"><img src="5527-large.jpg" height="595" width="800" /></div>

Add the link to the popup window, making sure the value passed to showPhoto matched the id of the div. For example:

<a href="javascript:void(0)" onclick="showPhoto('photo1');"><img src="5527.jpg" alt="" /></a>

Edit popup.css to alter the properties of the popup window.

Examples

Click to view photo 2

Click to view a popup with content

Download

Click here