Simple jQuery Modal Plugin That Slides In From Top

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>
</div>

$('.show-shutter').on('click', function(e){
  e.preventDefault();
  $('#modal-content').shutterModal();
})

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

$('.show-shutter').on('click', function(e){
  e.preventDefault();
  $('#modal-content').shutterModal({url:'ajax.html'});
})

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
zIndex:99,

// 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