Developer-friendly Inline Modal Plugin - jQuery simple-modal

A simple, easy-to-use jQuery modal plugin that helps developers create highly customizable modal windows to overlay any inline content on the top of the webpage.

How to use it:

1. Add the CSS class 'modal-content' to the modal content within the document.

<div id="example" class="modal-content">
  Modal Content Here
</div>

2. Include the jQuery simple-modal plugin after jQuery but before we close the body tag.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-simple-modal.js"></script>

3. Create a trigger element to launch the modal.

<button type="button" id="trigger">Launch</button>

4. Initialize the simple modal plugin and enable the trigger element to toggle the modal on click.

$('#example').simpleModal({
  opener: '#trigger'
});

5. Override the default modal styles to fit your design.

.modal-content {
  display: none;
  width: 50%;
  padding: 10px;
  /* more styles here */
}

6. Add custom close buttons to the modal.

<div id="example" class="modal-content">
  Modal Content Here
  <button type="button" id="ok">OK</button>
  <button type="button" id="cancel">Cancel</button>
</div>

$('#example').simpleModal({
  opener: '#trigger',
  closer: '#ok, #cancel'
});

7. Auto set the focus to a specific element when the modal is opened.

$('#example').simpleModal({
  opener: '#trigger',
  closer: '#ok, #cancel',
  focus: '#ok'
});

8. Determine whether to allow the modal to close by pressing ESC key. Default: true.

$('#example').simpleModal({
  opener: '#trigger',
  closeByEsc: false
});

10. Determine whether to allow the modal to close by clicking outside. Default: true.

$('#example').simpleModal({
  opener: '#trigger',
  closeByModalClick: false
});

11. Event handlers which will be fired when the modal is opened or closed.

$('#example').simpleModal({
  opener: '#trigger',
  closer: '#ok, #cancel',
  focus: '#ok'
}.on('modal:open', function(e, $elem) {
  console.log('opened by ' + $elem.attr('id'));
}).on('modal:close', function(e, $elem) {
  console.log('closed by ' + $elem.attr('id'));
});

---

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