JSPOPUP is javascript library I made for displaying popup window that floating on a page. JSPOPUP support two mode:
1. Modal pop-up: when pop-up window appear, background page will be inactive, user should focus on the pop-up
2. Child pop-up: one or more pop-up window may appear and will not block original page. Pop-up window can be moved or closed
1. Installing JSPOPUP
You can download source code here.
You also need to download JSPOPUP internal CSS code here
Include this javascript file in your HTML header section:
<script type="text/javascript" src="jquery.min.js"> <script type="text/javascript" src="jspopup.js">
JSPOPUP need JQuery library in order to work. You can download minimalize version here and include in HTML header like shown above.
Include jspopup.css in your HTML header section:
<link rel="stylesheet" href="jspopup.css">
2. Using JSPOPUP as Modal Window
JSPOPUP is generic javascript library, in order to display a pop-up window, you must create html code for that window(separate from main page’s html). This mean that you can freely design your pop-up window. Ok, lets try a basic pop-up window as introduction.
First, create test1.html :
<div class="testdiv"> This is an example of simple modal popup. <!-- we need a close button --> <input class="JSPOPUP_close" type="submit" value="close" > </div>
For this demonstration, you need this additional CSS setting(insert it to your CSS file):
.JSPOPUP_titleBar{
background-color: #6666cc;
color :#ffffff;
border-color:#000000;
border-style:solid;
border-width:0px;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
}
.testdiv{
width:300px;
font-size:10pt;
background-color: #ffffff;
color :#000000;
border-color:#000000;
border-style:solid;
border-width:0px;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-left:8px;
padding-right:8px;
padding-top:3px;
padding-bottom:3px;
}
.testdivborder{
border-width:2px;
border-color:#000000;
border-width:4px;
border-style:solid;
}
Last, in main page HTML code you can call pop-up window using function JSPOPUP_createModalPopUp(). In this example we use a button:
<input type="submit" value="Display test1 pop-up"
onclick='JSPOPUP_createModalPopUp("test1.html")'>
Demonstration 1:
In test1.html shown above, we need some element as close button for pop-up window. Close button can be any element having class name JSPOPUP_close. We can also close pop-up window by programmatically call function JSPOPUP_closePopUp(), as in example:
<div class="testdiv"> This is an example of simple modal popup. <!-- close button alternative--> <input onclick="JSPOPUP_closePopUp()" type="submit" value="close" > </div>
Moveable Window
We can create draggable pop-up window by add some component in pop-up HTML code with class name JSPOPUP_titleBar. Lets create test2.html with nicer design:
<div class="testdivborder"> <div class="JSPOPUP_titleBar"> Modal Popup </div><div class="testdiv"> This is an example of draggable modal popup. Since the blue title bar class name is JSPOPUP_titleBar, you can drag this popup window by dragging that title bar <br><br> <input type="submit" value="close" class="JSPOPUP_close"> </div> </div>
Then, in main page HTML code we call:
<input type="submit" value="Display test2 pop-up"
onclick='JSPOPUP_createModalPopUp("test2.html")'>
Demonstration 2:
3. Using JSPOPUP as Child Window
Sometimes you want to create pop-up window that doesn’t blockage the main page and can create more window without waiting user to close the previous one. For example, you want to create a toolbox window that can be shown or closed. For this purposes, we can simply change calling function to JSPOPUP_createPopUp(), as in example:
<input type="submit" value="Display test3 pop-up"
onclick='JSPOPUP_createPopUp("test3.html")'>
Demonstration 3:
That’s it. You can experiments with your pop-up window design, customize it for your needs 
