Basic Modal & Popup Plugin with jQuery - stepframemodal

stepframemodal is a simple and fast jQuery plugin to create animated and heavily customizable modals & popups that cover the whole page with a fullscreen overlay.

How to use it:

1. Load the latest version of jQuery and the jQuery stepframeModal plugin at the end of your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.stepframemodal.js"></script>

2. Create the modal content.

<div id="demo" class="popup">
  <div class="popup-container">
    <div class="popup-content">
      <span class="message">Modal content goes here</span>
      <div class="popup-close js-popup-close modal-close">X</div>
   </div>
  </div>
</div>

3. Create a toggle element to trigger the modal popup.

<a href="#demo" class="modal-popup">Trigger</a>

4. Add your custom CSS to style the modal popup.

.popup {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  vertical-align: middle;
}

.popup-container {
  display: block;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
  text-align: center;
}

.popup-content {
  padding: 2em;
  background-color: #fff;
  text-align: left;
  display: inline-block;
  position: relative;
  min-width: 50%;
  min-height: 200px;
}

.popup-close {
  background: none repeat scroll 0 0 #fff;
  cursor: pointer;
  display: block;
  font-size: 150%;
  line-height: 1.33333em;
  width: 1.3333em;
  height: 1.3333em;
  line-height: 130%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 2;
  color: #222222;
}

5. The Javascript to enable the trigger button to toggle the target modal popup.

$('.modal-popup').setupModal()

6. All the default customization options.

$('.modal-popup').setupModal({

// for multiple modal popups
id: 'popMod',

// debug mode
debug: false,

// transition options
// 'fade', 'slideDown', 'show'
// or a custom function
transition: 'fade',
transitionIn: 'fade',
transitionOut: 'fade',

// css selector for close button
closeSelector: ".modal-close",

// class that will be applied to the modal content when it is opened 
modalClassSelect: 'sfModalClass',

// 'slow' or 'fast'
transitionInTime: 'slow',
transitionOutTime: 'fast',

// data attribute name to use to specify modal target
dataAttribute: 'modaltarget',

// whether or not the modal window will close on click
modal: true

})

Change log:

2015-01-03

• update for IE8 support

---

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