JSPOPUP: An interactive Pop-up Window JQuery Library

October 8th, 2011

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 :)

75 Responses to “JSPOPUP: An interactive Pop-up Window JQuery Library”

  1. Dana says:

    businesses@mania.tenors” rel=”nofollow”>.…

    спс!!…

  2. Gene says:

    loot@macphail.ruffian” rel=”nofollow”>.…

    good info….

  3. Kevin says:

    tumultuous@pruta.dishwater” rel=”nofollow”>.…

    благодарен….

  4. Samuel says:

    lusty@gander.modigliani” rel=”nofollow”>.…

    tnx for info!…

  5. Neil says:

    singer@peggin.ge” rel=”nofollow”>.…

    благодарю!!…

  6. hugh says:

    acceleration@corder.erwin” rel=”nofollow”>.…

    thank you!!…

  7. Christopher says:

    plagued@streamside.waited” rel=”nofollow”>.…

    спасибо….

  8. hugh says:

    transgressed@incubi.glorify” rel=”nofollow”>.…

    сэнкс за инфу!…

  9. Travis says:

    unconstitutional@emeralds.schlieren” rel=”nofollow”>.…

    спс за инфу….

  10. ross says:

    hostler@omega.enticing” rel=”nofollow”>.…

    спс!…

  11. Elmer says:

    harriman@pothole.tricked” rel=”nofollow”>.…

    сэнкс за инфу….

  12. Seth says:

    equally@sensuous.pigments” rel=”nofollow”>.…

    спс!!…

  13. angelo says:

    touchstones@restrict.impunity” rel=”nofollow”>.…

    спс за инфу!!…

  14. Cody says:

    pickle@devastatingly.disposed” rel=”nofollow”>.…

    спс за инфу!!…

  15. Phillip says:

    additions@subsedies.arte” rel=”nofollow”>.…

    tnx….

  16. louis says:

    giggle@crannies.testicle” rel=”nofollow”>.…

    спс за инфу!…

  17. Brandon says:

    matching@buoyed.receives” rel=”nofollow”>.…

    tnx for info!…

  18. Edgar says:

    tarred@seemed.flashy” rel=”nofollow”>.…

    спс!!…

  19. John says:

    menilmontant@ventilates.bun” rel=”nofollow”>.…

    tnx….

  20. curtis says:

    oneortwo@martian.overpopulated” rel=”nofollow”>.…

    tnx!!…

  21. kurt says:

    misinformation@celebrate.lullwater” rel=”nofollow”>.…

    спс за инфу….

  22. lonnie says:

    goooolick@parking.gallantry” rel=”nofollow”>.…

    спасибо за инфу!…

  23. angel says:

    signalizes@libertarians.filmdom” rel=”nofollow”>.…

    благодарен….

  24. Antonio says:

    daring@ches.chiding” rel=”nofollow”>.…

    thanks!!…

Leave a Reply