Flexible jQuery Animated Modal Window Plugin - moaModal

moaModal is a clean and neat jQuery plugin for creating flexible modal boxes with custom animation effects and positioning. It also supports jQuery easing plugin if you want use easing options.

Basic Usage:

1. Include the latest jQuery library and jQuery moaModal plugin on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/moaModal.minified.js" type="text/javascript"></script>

2. Include easing plugin on the web page (optional)

<script src="jquery.easing.1.3.js" type="text/javascript"></script>

3. Create the html for the modal box

<div id="modal" style="...">
    Your Modal Content with your own styles 
</div>

4. Create a link or button to trigger the modal box

<button class="viewModal">Click Me</button>

5. Call the plugin with options

<script>
$(document).ready(function(){

$('.viewModal').modal({
target : '#modal',
speed : 250,
easing : 'easeInOutBounce',
animation : 'none',
position: '200px auto',
overlayClose : true,
on : 'click'
});

});
</script>

6. All the options

• target : selector/jQuery object of Modal element (ex: '#modal')
• on : Target Modal view on this jQuery event (ex: 'click', 'mouseenter', ...)
• close : selector/jQuery object of the closing element (ex: '.closeModal')
• escapeClose : Close Modal on pressing ESC button(default: true)
• speed : Modal view duration (default: 500)
• easing : jQuery Easing options (default: linear) need to include easing script
• position : Modal landing position, position can be set to 'center' to center modal or 'bottom' to show modal at the bottom, you can also set top and left position as '10px auto', 'auto 100px', '10% 10%', ...
• animation : Direction of Modal animation - accepts the following options
  • zoom : zoom effect from click position to the final position 
  • left : animate from left to the final position 
  • right : animate from right to the final position 
  • bottom : animate from bottom to the final position 
  • top : animate from left to the final position
• overlayClose : set to false if you don't want to close modal upon click on overlay area (default : true)
• overlayColor : Color of overlay element(default : black)
• overlayOpacity : overlay opacity(default : 0.6)
• complete : a callback function on modal final position

---

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