jsPop

beta



Integration.

jsPop doesn't require you to change html tags, bind jsPop to elements via onclick events, don't pollute your markup.

Flexible.

jsPop provides tools to load contents, you decide when and how to use them.

Lightweight.

jsPop is simplicity, no fancy stuff, just the basic boilerplate.



The idea behind jsPop is to keep things easy for the developer. Once you include the javascript and stylesheets you are ready to use jsPop. You need no custom styling or markups to make it work fine. Forget about adapting image gallery libraries to your needs.


Go topPractical examples



Go topInstallation & Usage.

Include the javascript and the stylesheets on your website. Then you are ready to call jsPop functions anywhere you need. Here is a table with different ways of loading content into the popup.

FunctionParameters
jsPop.divselector [,options]
jsPop.formselector, formSelector [,options]
jsPop.ajaxhref [,options]
jsPop.htmlhtml [,options]

Go topOptions

jsPop provides a single time format to show a popup, and global options that apply to every popup if active.

at the moment there aren't much customizable options

Single time options

Basically sets the style via optional parameters that accept each function div, form, ajax and html. The options are a json object which may contain options like,

options = {
	width:400,
	height:200,
	padding:18
}
jsPop.ajax(url, options);
			

Global options

At the moment jsPop includes a built-in close button, disabled by default. You can enable it via config method as follows,

jsPop.config(
{
	closeButton: true
});
			

You can try enabling globally the close button by clickin the button below, then open a popup and see how it now features a close button.

Example: jsPop.div

Let's suppose this is a div with id='demo-div'. Then we can call

jsPop.div("#demo-div");

Which is going to output the following

If you don't want to apply custom styling from a stylesheet, you can customize the the popup by adding options parameter like this,

jsPop.div("#demo-div", {padding:18});

Which is going to output the following

Example: jsPop.form

Let's suppose you want to display on the popup a field that belongs to a form. For example a password confirmation, if you use div() the form won't send the field in the popup. That's why you should use specific method form().

Example: jsPop.ajax

We can load via ajax this page with the following code,

jsPop.ajax('/');

Which is going to output the following

Example: jsPop.html

<h1> let's suppose this </h1> 

Now we can call,

jsPop.html('<h1> let\'s suppose this </h1>', {padding:32});

Which is going to output the following

This may be useful in combination with jsPop.ajax, which allows you to render the xhr.responseText directly into the popup.