+

Moa Modal

Tiny Modal jQuery Plugin

$ bower install moaModal

How To Use


<!-- first include jQuery library -->
<script src="./jQuery.js"></script>
<!-- Then moaModal plugin -->
<script src="./moaModal.js"></script>


//running moaModal must happen once document is ready
$(document).ready(function(){
	$('.open-some-modal').modal({

		//modal element
		target : $('#modal'),

		//jQuery event to trigger modal [click | onmouseenter | ...]
		on : 'click',

	    //position [top|bottom|left|right|center]
	    //or you can use css positions just like
	    //margin ex '0 auto' ...
	    position : 'bottom',

	    //animation speed in milliseconds
	    speed : 100,

	    //animation behaviour [top|left|right|bottom|none]
	    //none for no animation at all
	    animation : 'top',

	    /* Overlay settings */
	    
	    //enable/disable closing modal when clicking on background overlay
	    //[true|false]  => true by default
	    overlayClose : true,

	    //overlay custom color
	    overlayColor : '#000',

	    //overlay opacity
	    overlayOpacity : 0.9,

	    /* other options */

	    //enable | disable closing modal when on Esc key
	    //[true | false] => true by default
	    escapeClose : false,

	    //element when clicked will close the modal
	    close : $('.closeMe'),

	    //will be fired when modal is on place
	    complete : function (){
	    	alert('Hello');
	    }
	});


	//you can also trigger modal directly
	$('.button').click(function(){
		//view modal
		$('#modal').modal('view', options);

		//close modal
		$('#modal').modal('close');
	});


	//to override modals global settings
	//call modal function on document
	$(document).modal(options);

});

Options
  • position :(string) Position of modal window [top|bottom|left|right|center|] or use normal css margin style '10px auto'
  • animation :(string) animation start position effect [top|bottom|left|right|none]
  • speed :(number) animation speed in milliseconds
  • easing :(string) custom easing option if you're using an easing jQuery plugin
    • Default : linear
  • overlayClose :(boolean) close modal when clicking on overlay (default : true)
  • overlayColor :(string) overlay custom color
  • overlayOpacity :(number) overlay custom opacity (0 - 1)
  • escapeClose :(boolean) set false to prevent closing modal when Esc key pressed (default: true)
  • complete :(function) callback function to be fired when modal window loaded completely
    • function will pass modal element jQuery object

Examples

Top

Bottom

Center

More Examples?!

Check Some More Modal Examples