Click here to Skip to main content
14,382,825 members

PopScript.js: A New Way Creating Lightboxes and Tooltips

Rate this:
5.00 (1 vote)
Please Sign up or sign in to vote.
5.00 (1 vote)
28 Apr 2014CPOL
A basic tutorial on using PopScript.js


As a front-end developer, there is that eternal question poking your head at all times: "what's the best way that I can present the data to the users?" With the advent of AJAX data delivery, it is more common to piece together data sent from the server and presenting it to the users without having them to visit a different page. Today, one of the most popular ways of presenting the delivered data is through lightboxes, and sometime tooltips, which the user can close at his/her will.


HTML was always designed to be great for documents and not for dynamic elements. For abstracting the process of creating these lightboxes, modals, and tooltips, we now have libraries to the aid. PopScript.js ( gives you the ability to bring all these libraries together and provide you a declarative (like of CSS) interface to creating these elements, whether its a lightbox, modal, or a tooltip.

Using the Code

After inserting the "popscript.js" and "popscript.css" files available from

pop("Hello World"); 

The first argument is the content of the pop up. In this case: "Hello World".

This argument could be an HTML node or an HTML string too. For example:

var el = document.createElement('b');
el.innerHTML = 'Hello World'; 
// OR
pop("<b>Hello World</b>"); 

Pop Classes (The Second Argument)

pop("Hello World", "success");

The second argument here is the pop class. In this case "success".

success: {
    STYLE: {
        CLASS: {
            box: 'success'
        IN: {
            box: 'drop'
        OUT: {
            box: 'undrop'
        y: 'top'
    cross: false ,
    full_draggable: false ,
    click_me_out: true

The above declaration for 'success' is stored with every other pop class in the "popscript.js".

For learning about more such properties to configure your pop ups, visit the official website at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Relfor X
Canada Canada
No Biography provided

Comments and Discussions

-- There are no messages in this forum --
Posted 28 Apr 2014

Tagged as


7 bookmarked