Simple Responsive Modal Popup Plugin For jQuery - ModalBox

ModalBox is a simple, responsive, multipurpose jQuery modal plugin for showing dynamic or static content in a fancy modal dialog with a background overlay.

How to use it:

1. Insert the minified version of the jQuery ModalBox plugin into the html document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="dist/modal-box.min.js"></script>
<link rel="stylesheet" href="dist/modal-box.min.css">

2. Load the themes.min.css if you want to apply custom themes to modal headers.

<link rel="stylesheet" href="dist/themes.min.css">

3. Create a basic modal window on the webpage that will be toggled after you click the trigger button.

<button type="button" id="open-modal">Open modal</button>
<div id="my-modal">
  Modal Content Here
</div>

$("#my-modal").wgModal({
  triggerElement: '#open-modal'
});

4. Create a modal window on the webpage that will be toggled after X time in milliseconds.

$("#my-modal").wgModal({
  triggerElement: '#open-modal',
  openDelay:5000
});

5. Create a modal window on the webpage that will be toggled when the page is scrolled to specify spacing from top.

$("#my-modal").wgModal({
  triggerElement: '#open-modal',
  openScrolled: 200
});

6. Create a modal window on the webpage that loads an external page via AJAX.

$("#my-modal").wgModal({
  triggerElement: '#open-modal',
  remote:'ajax.html'
});

7. Apply a custom header to the modal window.

<button type="button" id="open-modal">Open modal</button>
<div id="my-modal">
  <div class="wg-header">Modal Header</div>
  Modal Content Here
</div>

$("#my-modal").wgModal({
  triggerElement: '#open-modal',
  theme:'info' // or success, warning, danger
});

8. More configuration options.

$("#my-modal").wgModal({
  openAfterNClicks: null,
  width: null,
  verticalCentering: false,
  topOffset: null,
  bottomOffset: null,
  keyboard: true, //  Closes the modal when escape key is pressed
  innerScroll: false,
  responsive:{}, // responsive options or events
});

9. Event handlers available.

$("#my-modal").wgModal({
  onInitialize: function (e) {}, 
  onBeforeClose: function (e) {}, 
  onAfterClose: function (e) {},
  onBeforeOpen: function (e) {}, 
  onAfterOpen: function (e) {}, 
});

---

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