Tiny CSS3 Animated Modal Window Plugin - jQuery CustomModal

CustomModal is a lightweight jQuery plugin to display customizable, CSS3 animated modal windows on the web page.

Features:

• Supports multiple modal windows.
• Custom templates.
• Closes modal by clicking on background overlay.
• Callback functions.
• Useful API methods and events.

How to use it:

1. Include the jQuery CustomModal plugin's files on the web page which has jQuery library loaded.

<link rel="stylesheet" href="customModal.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="customModal.js"></script>

2. Enable a trigger button to toggle a basic modal window.

<a href="#" id="basic">Open</a>

$('#basic-button').customModal({

  // modal ID
  id: 'basicModal',

  // modal content
  template: '<p class="modal-text">Modal Content</p>' 
  
});

3. Decide whether to close the modal by clicking the background overlay.

<a href="#" 
   data-modal-bgclick="true"
   id="basic">
   Open
</a>

4. Possible options to customize the modal window.

$('#basic-button').customModal({

  // position
  position: 'center',

  // width/height
  width: '420',
  height: '220',

  // shows close button
  close: true,

  // left/top position
  left: '0',
  top: '0',

  // allows multiple instances
  multiple: false

});

5. Callback functions.

$('#basic-button').customModal({

  onInit: function () { },
  onBeforeShow: function () { },
  onAfterHide: function () { },

});

6. API methods.

$('#basic-button').customModal({

  onInit: function () { },
  onBeforeShow: function () { },
  onAfterHide: function () { },

});

7. Event listeners.

$('#basicModal').on('beforeShow', function(){ 
  // do something
});

$('#basicModal').on('afterHide', function(){ 
  // do something
});

---

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