Simple Fullscreen Sliding Modal Plugin For jQuery - shutterModal

shutterModal is a simple yet highly configurable jQuery modal plugin that shows a sliding modal window with a fullscreen overlay on  your web application.

Features:

• Ajax enabled.
• Supports easing effects (Requires jQuery easing plugin).
• Custom background color.
• Custom animation speed.
• Callback functions.

How to use it:

1. Make sure both the jQuery shutterModal plugin and jQuery framework are included on the web page.

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

2. Include the jQuery easing plugin for easing support.

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

3. Launch a basic modal window that loads data from inline 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. Launch a dynamic modal window that loads remote data from an external URL via AJAX request.

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

5. Style the modal window & overlay whatever 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 the 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(){}

Change log:

2015-06-15

• positioning of div now done with js only.
• width calculation is now proper

---

This awesome jQuery plugin is developed by mtsandeep. For more Advanced Usages, please check the demo page or visit the official website.