Lightweight Customizable jQuery Modal Plugin - Syaku Modal

Syaku Modal is a small, simple jQuery plugin that makes it easy to display flexible, clean, fully customizable modal dialog boxes on your web page.

How to use it:

1. Load the necessary jQuery library and the jQuery Syaku Modal plugin in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.syaku.modal.js" /></script>
<link rel="stylesheet" href="jquery.syaku.modal.css">

2. Load the optional jQuery UI library for drag and drop support.

<script src="jquery-ui.min.js"></script>

3. Place your content inside an element with an unique ID.

<div id="demo" style="display:none;">Modal Content</div>

4. Call the jmodal(); method on the element you just created..

var modal = $('#demo').jmodal();
$('#trigger').click(function() {
  modal.open();
});

5. Configuration options.

var modal = $('#demo').jmodal({
  
  // auto active
  'auto': false, 

  // padding
  'padding': '15px', 

  // radius
  'radius': '8px', 

  // remove opened modals
  'remove': false, 
  'single': null, 

  // eac key to close the modal
  'esc': true, 
  'focus': null, 

  // background color
  'backgroundColor': '#000', 

  // show a close button
  'buttonClose': false, 

  // opacity level
  'opacity': 0.75,

  // z-index
  'zIndex': 100, 

  // callback functions
  'beforeOpen': null, 
  'afterOpen': null, 
  'beforeClose': null, 
  'afterClose': null,

  // additional CSS class
  'class': null,

  // fixed width
  'width': null
  
});

6. Methods.

// oepn a modal
modal.open();

// close a modal
modal.close();

Change log:

2015-07-30

• js update.

2015-06-05

• bugs fix

---

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