PopScript.js: A New Way Creating Lightboxes and Tooltips

History

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.

Introduction

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 (http://popscript.relfor.co) 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 http://popscript.relfor.co:

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'; 
pop(el);  
// 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'
        }
    },
    ANIMATION: {
        IN: {
            box: 'drop'
        },
        OUT: {
            box: 'undrop'
        }
    },
    POSITION: {
        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 http://popscript.relfor.co.