Easy Customizable jQuery Modal Plugin Plugin - MiMo

MiMo is a lightweight yet heavily customizable jQuery plugin used to create a simple clean, responsive modal window from inline content. Licensed under the GPL.

More features:

• Cross-browser and mobile-friendly.
• Fully customizable via data-* attributes.
• Supports various types of html elements.
• Super lightweight and easy to implement.
• Auto resize & recenter on window resize.

How to use it:

1. Load the jquery.mimo.min.css in the header, and the jquery.mimo.min.js in the footer.

<link href="dist/jquery.mimo.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="dist/jquery.mimo.min.js"></script>

2. Place your modal content in an element with an unique modal id.

<div class="mimo_modal" id="demo">
  Modal Content
</div>

3. Create a link to launch the modal with default skin.

<a href="#" data-mimo="modal:demo;">Launch</a>

4. Use the classic skin.

<a href="#" data-mimo="modal: demo;skin: mimo_classic;">Launch</a>

5. Use the clear skin.

<a href="#" data-mimo="modal: demo;skin: mimo_clear;">Launch</a>

6. Use a custom close link instead of the default close icon.

<div class="mimo_modal" id="demo">
  Modal Content
  <a href="#" class="custom_close">Done!</a>
</div>

<a href="#" data-mimo="modal: demo;close: custom_close;">Launch</a>

7. Embed an image into the modal.

<div class="mimo_modal" id="demo">
  <img data-mimo-src="1.jpg" alt"" title="Title">
</div>

<a href="#" data-mimo="modal: demo;">Launch</a>

8. More configuration options can be passed in via data-mimo attribute.

<a data-mimo="
  modal: demo;
  opacity: 0.3; 
  width: 520;
  top: 100;
  overlay: #ffffff;
  close: custom_close;
  skin: mimo_clear;">
  Launch
</a>

9. Callback function.

// execute a function after the modal is opned
onAfterOpen: function () {}

---

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