Bootstrap-style Modal Plugin For jQuery - modal.js

Bootstrap-style Modal Plugin For jQuery - modal.js
File Size: 3.58 KB
Views Total: 2134
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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 class="modal-body">
      Modal Content

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

<script src="//"></script>
<script src="modal.js"></script>

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


5. Customize the modal window with the following settings:


  // 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.