http://www.javascripttoolbox.com/lib/popup/example.php
This simplest example uses an existing DIV defined on the page as the popup window. By default, the DIV is hidden. The Popup.show() function is used to treat the DIV as a popup, show it, and make it auto-hide if anything else is clicked.
Click Here To Show DIV
<view/hide code>
<div id="simplediv" style="background-color:yellow;border:1px solid black;display:none;width:200px;height:200px;">Click anywhere in the document to auto-close me</div>
<a href="#" onclick="Popup.show('simplediv');return false;">Click Here To Show DIV</a>
Simple Popup With Auto-Created DIV
For this example, there is no DIV defined anywhere on the page for the popup. The library will automatically create one and populate its contents from what is passed into the Popup.show() function. Some styles to be applied to the created DIV are also passed, so it stands out.
Click Here To Show DIV
<view/hide code>
<a href="#" onclick="Popup.show(null,null,null,{'content':'This DIV was created dynamically!',
'width':200,'height':200,
'style':{'border':'1px solid black','backgroundColor':'cyan'}});return false;">Click Here To Show DIV</a>
Styling Popups With Class Names
It's possible to set the classname that will be assigned to a generated DIV by passing it a 'className' value. This way, you can have multiple popups use the same code, but have different styles based on their class name.
Click Here To Show DIV with className popupClass1
Click Here To Show DIV with className popupClass2
<view/hide code>
<style type="text/css">
.popupClass1 { width:100px;height:300px;background-color:red; }
.popupClass2 { width:300px;height:100px;background-color:green; }
</style>
<a href="#" onclick="Popup.show(null,null,null,{'className':'popupClass1'});return false;">Click Here To Show DIV with className popupClass1</a>
<br>
<a href="#" onclick="Popup.show(null,null,null,{'className':'popupClass2'});return false;">Click Here To Show DIV with className popupClass2</a>
Using A Popup Object
The Popup.show() function is a shortcut method to quickly and easily show a popup. If you need more control, or if you'll be repeatedly referencing the same popup, you can create a Popup object to be used. Internally, Popup.show() creates a Popup object automatically and the auto-created DIV object is destroyed when it is hidden. This avoids many DIV objects being created and left lying around. When you create a Popup object, the DIV object is not destroyed because you may reuse the object many times.
Click Here To Show Popup Object
<view/hide code>
<script type="text/javascript">
var popup1 = new Popup();
popup1.content = "This is the content of the DIV";
popup1.style = {'border':'3px solid black','backgroundColor':'white'};
</script>
<a href="#" onclick="popup1.show();return false;">Click Here To Show Popup Object</a>
Disabling Auto-Hide
By default, popups are "auto-hide" which means a mouse click anywhere on the page outside of the popup will automatically hide it. If you don't want this behavior, you can disable this option. Your code should then provide a way to close the popup manually, or it should close itself somehow. This example also illustrates the "ref" property of each popup, which contains a string which can be used in any javascript call to reference the object itself.
Click Here To Show Popup Object
<view/hide code>
<script type="text/javascript">
var popup2 = new Popup();
popup2.autoHide = false;
popup2.content = 'This DIV will not close automatically!<br><br><a href="#" onclick="'+popup2.ref+'.hide();return false;">Click here to close</a>';
popup2.width=200;
popup2.height=200;
popup2.style = {'border':'3px solid black','backgroundColor':'yellow'};
</script>
<a href="#" onclick="popup2.show();return false;">Click Here To Show Popup Object</a>
Positioning The Popup
By default, popups will be centered within the user's viewport, but there are a number of positioning options available to place the popup exactly where you wish, relative to a reference object on the page. The examples below illustrate a variety of positioning options. See the documentation for all positioning options. Note that the examples below also set constrainToScreen=true so the popup will always stay within the viewport.
Reference Box
In these examples, 'position' is the ID of the cyan popup, and 'reference' is the ID of the yellow box above. If the position of the box would put it off the screen, then it will be moved to fit.
Popup.show('position','reference','above adjacent-left',{'constrainToScreen':true});
Popup.show('position','reference','top left',{'constrainToScreen':true});
Popup.show('position','reference','center center',{'constrainToScreen':true});
Popup.show('position','reference','bottom right',{'constrainToScreen':true});
Popup.show('position','reference','below adjacent-right',{'constrainToScreen':true});
You can also supply a value for offsetTop and/or offsetLeft, to move the position a certain distance away from its calculated position. Once again, if the position would put it off the screen, it will be automatically moved to fit on the screen.
Popup.show('position','reference','center center',{'constrainToScreen':true,'offsetTop':-200});
Popup.show('position','reference','center center',{'constrainToScreen':true,'offsetTop':500,'offsetLeft':500});
If you position relative to the document itself and constrain to the screen, you can put a popup in any corner of the user's viewport.
Popup.show('position',Screen.getBody(),'top left',{'constrainToScreen':true});
Popup.show('position',Screen.getBody(),'top right',{'constrainToScreen':true});
Popup.show('position',Screen.getBody(),'bottom left',{'constrainToScreen':true});
Popup.show('position',Screen.getBody(),'bottom right',{'constrainToScreen':true});
Using positioning relative to a form input would allow you to pop up a helper to populate the field when it gets focus, for example:
Top of Form
Name:
Bottom of Form
<div id="helper" style="background-color:yellow;border:1px solid black;display:none;padding:2px;"></div>
<script type="text/javascript">
var helperPopup = new Popup('helper'); // Pass an ID to link with an existing DIV in page
helperPopup.autoHide = false;
helperPopup.position = "below right";
helperPopup.constrainToScreen = false;
</script>
<form name="testform" action="">
Name: <input name="fullname" value="" size="25" title="Enter Your Full Name"
onFocus="helperPopup.show({'reference':this,'content':this.title})" onBlur="helperPopup.hide()">
</form>
Covers Select Boxes Automatically
A "feature"/bug of IE on Windows is that operating system controls like SELECT boxes, etc will show through positioned DIV's regardless of z-index settings. This can be fixed by inserting an iframe into the page under the DIV, with exactly the same position and dimensions, which acts to "mask" the controls. This is done automatically by the library, and only on Windows systems running IE.
Show a over the select This is a test select box
<view/hide code>
<a href="#"
onclick="Popup.show(null,this,'center adjacent-right',{'content':'This should show over the select','style':{'border':'1px solid black','backgroundColor':'yellow'}});return false;">Show a over the select</a>
<select name="overselect"><option value="x">This is a test select box</option></select>
Modal Popups
A "modal" popup can be simulated by covering the main document with a semi-transparent layer which prevents the user from interacting with it until the popup is dismissed. The color and transparency of the "screen" can be configured, of course.
Show Modal Popup
Show Modal Popup With A Custom Screen
<view/hide code>
<div id="modal" style="border:3px solid black; background-color:#9999ff; padding:25px; font-size:150%; text-align:center; display:none;">
This is a modal popup!<br><br>
<input type="button" value="OK" onClick="Popup.hide('modal')">
</div>
<a href="#" onclick="Popup.showModal('modal');return false;">Show Modal Popup</a>
<br>
<a href="#" onclick="Popup.showModal('modal',null,null,{'screenColor':'#99ff99','screenOpacity':.6});return false;">Show Modal Popup With A Custom Screen</a>
