Fast, light, mobile-friendly popup and modal plugin.
The script was tested in the following browsers:
- Internet Explorer 7+
- Firefox
- Chrome
- Safari
- Opera
- Android 4+
- iOS7+
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');
});There are two ways of specifying options:
$('.simplebox').simplebox({
duration: 300,
linkClose: '.close, .btn-close'
});or
$.simplebox('#modal01', {
duration: 300,
linkClose: '.close, .btn-close'
});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 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 |
| Method | Description |
|---|---|
$.simplebox.close() |
This method is a global and will close any opened simplebox |
| 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 |
This script is licensed under the MIT License.
Copyright 2015-2016 JetCoders.com