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 (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:
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 Classes (The Second Argument)
pop("Hello World", "success");
The second argument here is the
pop class. In this case "
cross: false ,
full_draggable: false ,
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.