Download
Demo
- Overview
- Documents
User Rating: 3.1/5 ( 2 votes)
Your Rating:
Moa Modal - Flexible jQuery modal plugin
Features
- Custom animation and positioning
- Customize your modal the way you like, no predefined style sheet!
Source: http://dl.dropboxusercontent.com/u/3241507/moaModal/index.html
1- HEADER
<!-- include modal plugin right after loading jQuery --> <script src="jQuery.js" type="text/javascript"></script> <!-- add easing jquery plugin if you want to use easing option --> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="modal.js" type="text/javascript"></script>
2- HTML
<!-- triggering element --> <button class="viewModal">Click Me</button> <!-- modal element --> <div id="modal" style="display:none;width:50%;..."> Your Modal Content with your own styles </div>
3- Javascript
$(function(){ $('.viewModal').modal({ target : '#modal', animation : 'top', position : 'center' }); });
Options
Custom Global Options
These options goes with each modal, and if you want to override global options for all modals add these options to $(document) element ex :$(document).modal({ 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
Triggering Options
view : View Modal ex : $('#modal').modal('view',{ options .. })
close : Closing Modal ex : $('#modal').modal('close')