Flexibile Modal & Dialog Plugin For jQuery - sls-modal.js

sls-modal.js is a lightweight and easy-to-use jQuery plugin used for creating flexible, highly customizable modal windows and dialog boxes on the webpage.

Key features:

• Custom modal content (header, body, footer and action buttons).
• Custom modal styles & positions.
• Useful callback functions.
• Compatible with Bootstrap framework.
• Cross browser and mobile friendly.

How to use it:

1. Just download and include the jQuery sls-modal.js after jQuery library and the modal plugin is read for use.

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

2. The JavaScript to create a default modal window on the webpage.

SlsModal.init().show();

3. Customize the modal header, body and footer content.

SlsModal.init({
  header: "Modal Title",
  body: "Modal Content",
  footer: "",
}).show();

4. Customize the actions buttons displayed at the bottom of the modal.

SlsModal.init({
  btns:[{
      text:'Default',
  },{
      text:'Info',
      type:'info'
  },{
      text:'Warning',
      type:'warning'
  },{
      text:'Danger',
      type:'danger'
  },{
      text:'Success',
      type:'success'
  }]
}).show();

5. Customize the size and position of the modal.

SlsModal.init({
  width: "520px",
  offsetTop: false,
  top: false
}).show();

6. Customize the modal close behaviors.

SlsModal.init({

  // close the modal by clicking on the 'x' button
  isClickClose: true,

  // close the modal by clicking on the 'close' button
  isClickBtn: true,

  // close the modal by clicking on the bg overlay
  isClickBg: true,

  // false = close the modal using your own events
  isAutoClose: true,

  // show the 'x' button
  isShowClose: true,

}).show();

7. Callback functions.

SlsModal.init({

  onShowBefore: function() {},
  onShowAfter: function() {},
  onCloseBefore: function() {},
  onCloseAfter: function() {},
  onClickClose: function() {},
  onClickBg: function() {},
  onClickBtn: function() {},

}).show();

---

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