CSS3 Animated Modal Plugin with jQuery And CSS3 - modalBox

modalBox is a lightweight and simple-to-use jQuery modal plugin which helps you create awesome popup windows with CSS3 animations.

How to use it:

1. Include Animate.css and the jQuery modalBox plugin's CSS file in the head section.

<link rel="stylesheet" href="animate.min.css">
<link href="jquery.modalBox.css" rel="stylesheet">

2. Wrap your modal content with a close link into a container element with an unique ID.

<div class="modal-box" id="modal-content">
  <div class="inner">
      <button class="close">&times;</button>
      Modal content goes here
  </div>
</div>

3. Create a link pointing to the ID to toggle the modal window.

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

4. The JavaScript to open the modal window and specify the open / close animations you prefer to use.

$('a.modal-box').click(function(e){
  e.preventDefault();

  // .modabox (ELEMENT, ACTION, OPTIONS)
  $('#modal-content').modalBox("open",{
    openAnimationEffect:'bounceIn',
    closeAnimationEffect:'bounceOut'
  });
});

5. Full plugin options.

// Close the modal when press escape key
closeOnEscape: true,

// Automatically close modal window
autoClose: false,

// Automatically close delay
autoCloseDelay: 3000

6. Public methods.

// var api = $('#modal').data("modalBox");

// Open the modal window
.modalBox("open")

// Close the modal window
.modalBox("close")

7. Events.

• beforeOpen
• afterOpen
• beforeClose
• afterClose

$('.modal').on('modalBox:EVENT-NAME', function(){
  // Do something
});

Changelog:

2018-11-01

• v2.1.1

2018-08-12

• v2.1.0

2018-04-17

• Bugfix

2018-03-31

• v2.0

2016-11-13

• centering modal

2016-09-07

• fixed close button

2016-08-29

• Vertical centering, bug fix

2016-02-11

• Made options changeable after init

2015-11-11

• Vertical centering

2015-09-04

• window scroll bug fix

2015-08-17

• z-index bug fix

2015-07-29

• added cross browser support

---

This awesome jQuery plugin is developed by vladrub. For more Advanced Usages, please check the demo page or visit the official website.