shutterModal
Simple jQuery modal plugin which slides in from top. demo : http://demos.mtsandeep.com/shutter-modal/
##Basic usage
// basic trigger for the shutterModal $('#modal-content').shutterModal();
##With all available options
// These are the default values $('#modal-content').shutterModal({ background: 'rgba(0,0,0,0.8)', // background color for the cover zIndex:99, // z-index value if you need any higher value url: '', // url to fetch content, if you want to load content from another url via ajax easing: 'swing', // you can use easing plugin to add other easing effects for the shutter animation duration: 1000, // animation duration of shutter from top showAfter: 0, // delay for shutter to trigger, useful when you need shutter automatically triggered after x seconds hideAfter: 0, // close the shutter automatically after x seconds close: true, // If you need a close button added automatically escClose: true, // do you want to close shutter with escape key remove: false, // remove the shutter onLoad : function(){}, // function called after completely loading the shutter onClose : function(){} // function called after completely removing the shutter });
##example
Include jquery, shutterModal.js into your html page and trigger the shutterModal
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/shutterModal.js"></script> <script> $(function(){ $('.show-shutter').on('click', function(e){ e.preventDefault(); $('#modal-content').shutterModal({easing:'jswing'}); }) }); </script> <a class="show-shutter" href="#">show shutter</a> <!-- content in hidden div --> <div id="modal-content" style="display:none"> <p>Hello this is a demo text</p> </div>