Demo
Bounce effects: bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
Fade effects: fadeIn fadeInDown fadeInDownBid fadeInUp fadeInUpBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig
Flip effects: flipInX flipInY flip
Rotate effects: rotateIn rotateDownIn rotateInDownRight rotateInUpLeft rotateInUpRight
Zoom effects: zoomIn zoomInDown zoomInUp zoomInLeft zoomInRight
Other effects: lightSpeedIn rollIn hinge
How to use
Include plugin files:
<link href="../dist/css/jquery.modalBox.css" rel="stylesheet"> <script src="../dist/js/jquery.modalBox.js"></script>
Add modal after <body> tag:
<div class="modal-box" id="demo">
<div class="inner">
<button class="close">×</button>
Content
</div>
</div>
Show modal button:
<a href="#modal-box" class="modal-box">Show modal</a>
Call the plugin when the body is on load:
$('a.modal-box').click(function(e){
e.preventDefault();
$( $(this).attr("href") ).modalBox("open");
});
Options
| Name | Type | Property | Description |
|---|---|---|---|
| openAnimationDuration | number | 500 | Set animation duration when opening modal |
| closeAnimationDuration | number | 500 | Set animation duration when closing modal |
| openAnimationEffect | string | default-in | |
| closeAnimationEffect | string | default-out | |
| closeOnEscape | boolean | true | Allows the user to close the modal when press escape key. |
| autoClose | boolean | false | Automatically close modal window. |
| autoCloseDelay | number | 3000 | Automatically close delay. |
Events
$('.modal').on('modalBox:___EVENT_NAME___', function(){
});
| Name | Description |
|---|---|
beforeOpen
$('.modal').on('modalBox:beforeOpen', function(){
});
|
Before open modal |
afterOpen
$('.modal').on('modalBox:afterOpen', function(){
});
|
After open modal |
beforeClose
$('.modal').on('modalBox:beforeClose', function(){
});
|
Before close modal |
afterClose
$('.modal').on('modalBox:afterClose', function(){
});
|
After close modal |
Methods
Accessing the API
var api = $('#modal').data("modalBox");
| Name | Description |
|---|---|
open
api.close(); |
Open modal |
close
api.open(); |
Close modal |