jQuery simplebox
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
LICENSE
README.md
index.html

README.md

JetCoders jQuery Simplebox

Fast, light, mobile-friendly popup and modal plugin.

Browser support

The script was tested in the following browsers:

  • Internet Explorer 7+
  • Firefox
  • Chrome
  • Safari
  • Opera
  • Android 4+
  • iOS7+

Usage

The script requires jQuery 1.7+ to work properly. To add script in your page simply attach file - jquery.simplebox.js:

<script src="js/jquery.js"></script>
<script src="js/jquery.simplebox.js"></script>

For start you need create HTML for modal and put it in to the end of <body>:

<div class="modal" id="modal01">
	<span class="close">close</span>
	<p>Some text</p>
</div>

Then create link with modal ID and class="simplebox":

<a class="simplebox" href="#modal01">Open modal01</a> 

<button class="simplebox" type="button" data-href="#modal02">Open modal02</button>

Next step is create simple CSS for modal:

.modal{
	width:500px;
	padding:30px 20px;
	border: 1px solid #000;
	position:absolute;
	background:#fff;
	left:-9999px;
	top:-9999px;
	z-index:1000;
}

When the page is loaded all you have to do is simply call function:

$(function() {
	$('.simplebox').simplebox();
});

or, if you want open modal without link:

$(function() {
	$.simplebox('#modal01');
});

Setting Options

There are two ways of specifying options:

$('.simplebox').simplebox({
	duration: 300,
	linkClose: '.close, .btn-close'
});

or

$.simplebox('#modal01', {
	duration: 300,
	linkClose: '.close, .btn-close'
});

Options

The most commonly used options are listed below.

Option Description Data Type Default
duration Duration in milliseconds Number 300
linkClose Specify class which will be added to close button String ".close, .btn-close"
disableClass Specify class which will be added to form submit buttons String "disabled"
overlay Options for overlay (set false if overlay don't need) Object or Boolean Overlay options are listed below
positionFrom Set modal position from HTML element (example: "#block") String or Boolean false

Overlay options

Overlay option Description Data Type Default
box Specify class which will be added to overlay block String "simplebox-overlay"
color Background color for overlay String "black"
closeClick Enable this option to close modal when you click on overlay Boolean true
opacity Set CSS opacity to overlay Number 0.3

Methods

Method Description
$.simplebox.close() This method is a global and will close any opened simplebox

Events

Event Description
onOpen: function(obj){...} This event start befor simplebox is open
afterOpen: function(obj){...} This event start after simplebox is open
onClose: function(obj){...} This event start befor simplebox is close
afterClose: function(obj){...} This event start after simplebox is close

License

This script is licensed under the MIT License.

Copyright 2015-2016 JetCoders.com