Minimal Static Modal Dialog Plugin - jQuery miniModal

miniModal is a lightweight, easy-to-use, cross-browser jQuery modal plugin which loads HTML content in the DOM into a modal overlay when triggered.

More features:

• Custom close link & events.
• Allows to append to any container element.
• Lots of options and callbacks.
• Easy to style using your own CSS experience.

How to use it:

1. Insert your modal content into a container element as follow:

<div class="content">
  Modal Content Goes Here
</div>

2. Load jQuery JavaScript library and the jQuery miniModal plugin's script in the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.minimodal.js"></script>

3. Load the modal content in a modal popup.

$.miniModal({
  load: $('.content'),
  onLoad: function(){
    $('.content').show();
  }
});

4. Apply custom styles to the modal popup as follows:

#overlay {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background: black;
  opacity: 0.4;
  z-index: 10;
  display: none;
  cursor: pointer;
}

#modal_base {
  z-index: 15;
  position: absolute;
  display: none;
}

.modal {
  padding: 20px;
  color: #111;
  display: block;
  background: #EEE;
  font: bold 12px Arial;
  border-radius: 20px;
  border: 10px solid #111;
  box-shadow: 0 0 30px #333;
}

.content {
  display: none;
}

5. Customize the modal popup by overiding the following settings.

$.miniModal({

  // parent container
  appendTo: 'body',

  // text for close link
  closeTxt: '[close]',

  // fade transition in ms
  fade: 0,

  // height/width
  height: null,
  width: null,

  // shows close button
  close: true,

  // close by pressing ESC
  escClose: true,

  // close by clicking overlay
  overlayClose: true,

  // auto positioning
  position: true,

  // absolutly positioned 
  absolute: false,

  // modal mode
  modal: true,

  // shows overlay
  overlay: true,

  // overlay ID
  overlayId: 'overlay',

  // modal ID
  modalId: 'modal_base',

  // id of close link
  closeId: 'modal_close',

  // modal class
  style: 'modal'
  
});

6. Available callback functions.

$.miniModal({

  onOpen: function() {},
  onCreate: function() {},
  onLoad: function() {},
  onDisplay: function() {},
  onClose: function() {},
  onResize: function() {},
  onKill: function() {},
  beforeClose: function() {},
  
});

---

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