Press "Enter" to skip to content

Simple jQuery Modal Plugin That Slides In From Top | shutterModal

shutterModal is a simple but highly configurable modal jQuery extension that displays a sliding modal window with a full-screen overlay on your web application.

modal cover entire screen, bootstrap full screen modal, jquery modal full screen

How to make use of it:

1. jQuery shutterModal plugin and jQuery framework in your webpage.

<script src="jquery.min.js"></script>
<script src="js/shutterModal.js"></script>

2. Include a jQuery plugin to ease support.

<script src="jquery.easing.min.js"></script>

3. Launch a basic modal window that loads data from the embedded HTML content.

<a class="show-shutter" href="#">Show Modal</a>
<div id="modal-content" style="display:none">
  <p>Hello this is a demo text</p>
$('.show-shutter').on('click', function(e){

4. Run a dynamic module window that loads remote data from an external URL via an AJAX request.

$('.show-shutter').on('click', function(e){

5. Style modal window and overlay as you like.

#shutter-cover:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;

#shutter-cover { text-align: center; }

#shutter-cover .shutter {
  display: inline-block!important;
  vertical-align: middle;
  text-align: left;

.shutter {
  background: #fff;
  padding: 20px;
  max-width: 600px;
  width: 100%;

6. All configuration options.

// the background color of the overlay
background: 'rgba(0,0,0,0.8)',

// CSS z-index property

// remote URL
url: '',

// easing option
easing: 'swing',

// animation speed
duration: 1000,

// delays
showAfter: 0,
hideAfter: 0,

// display a close button
close: true,

// close the modal by ESC key
escClose: true,

// auto dismiss
remove: false,

// callback functions
onLoad : function(){},
onClose : function(){}

simple fullscreen sliding modal jquery, shutterModal Plugin/Github

See Demo And Download

Official Website(mtsandeep): Click Here

This superior jQuery/javascript plugin is developed by mtsandeep. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.