Click here to Skip to main content
Click here to Skip to main content
Go to top

PopScript.js: A New Way Creating Lightboxes and Tooltips

, 28 Apr 2014
Rate this:
Please Sign up or sign in to vote.
A basic tutorial on using PopScript.js

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.

License

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

Share

About the Author

Relfor X

Canada Canada
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 29 Apr 2014
Article Copyright 2014 by Relfor X
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid