Bootstrap-style Modal Plugin For jQuery - modal.js

modal.js is a jQuery plugin that enables you to create Bootstrap-style, highly customizable modal windows with minimal effort.

How to use it:

1. Load the required stylesheet to style the modal window.

<link rel="stylesheet" href="modal.css">

2. The html structure for the modal window.

<div class="modal modal-hidden">
  <div class="modal-bg"></div>
  <div class="modal-content" style="width:60%;">
    <div class="modal-header">
      <div class="modal-close">×</div>
      <div class="modal-title">Modal Title</div>
    </div>
    <div class="modal-body">
      Modal Content
    </div>
  </div>
</div>

3. Load jQuery and the modal.js script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="modal.js"></script>

4. Call the function to display the modal window on page ready.

$('.modal').modal();

5. Customize the modal window with the following settings:

$('.modal').modal({

  // click on background to close the modal
  bgCancel: true,

  // opacity of the background overlay
  bgOpacity: .6,

  // animation durations
  contentDuration: 250,
  bgDuration: 150,

  // distance between modal and page top
  slideDistance: 150
  
});

---

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