Demo

Simple Top Zoom Zoom to Left Bottom Height Expand From Right From Left Expand

Plugin Usage

1- HEADER

1 2 3 4 5 
<!-- 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>
view raw modal html head hosted with ❤ by GitHub

2- HTML

1 2 3 4 5 6 7 
<!-- 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>
view raw modal html hosted with ❤ by GitHub

3- Javascript

1 2 3 4 5 6 7 
$(function(){
    $('.viewModal').modal({
        target : '#modal',
        animation : 'top',
        position : 'center'
    });
});
view raw modal javascript hosted with ❤ by GitHub

Plugin Options

Custom Global Options

  • Description
  • Example

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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 
//set global options
$(document).modal({
    easing : 'easeInOutBounce',
    speed : 600,
    animation : 'top',
    position 'center',
    overlayClose : true,
    on : 'click'
});
 
//per modal options, will use global options we set above
$('.clickMe').modal({
    target : '#modal1'
});
 
//override global options for this modal
$('.mouseover').modal({
    target : '#modal2',
    animation : 'zoom',
    position : '10px auto', //top 10px left auto
    easing : 'easeOutElastic',
    on : 'mouseenter',
    overlayClose : false,
    overlayColor : 'red',
    overlayOpacity : 0.5
    close : '.closeMe'
});
view raw modal example hosted with ❤ by GitHub

Triggering Options

  • Description
  • Example
view : View Modal ex : $('#modal').modal('view',{ options .. })
close : Closing Modal ex : $('#modal').modal('close')
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
//trigger modal view
$('.someElement').click(function(){
    $('#modal').modal('view',{
        easing : 'linear',
        position : 'bottom',
        animation : 'top left',
        speed : 1000
    });
});
 
//trigger modal close
$('.someOtherElement').click(function(){
    $('#modal').modal('close');
});
view raw modal trigger hosted with ❤ by GitHub
Close Me Another Modal