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">&times;</button>

Show modal button:

<a href="#modal-box" class="modal-box">Show modal</a>

Call the plugin when the body is on load:

    $( $(this).attr("href") ).modalBox("open");


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.


$('.modal').on('modalBox:___EVENT_NAME___', function(){

Name Description
beforeOpen Before open modal
afterOpen After open modal
beforeClose Before close modal
afterClose After close modal


Accessing the API

var api = $('#modal').data("modalBox");
Name Description
open Open modal
close Close modal