Minimalist Inline Modal/Popup Plugin With jQuery - simplePopup

simplePopup is a simple, fast jQuery popup plugin which helps you create modal & popup windows from inline elements within the document.

How to use it:

1. Include the jQuery simplePopup plugin's JS and CSS files on the webpage which has JQuery library loaded.

<link rel="stylesheet" href="simplePop.css">
<script src="jquery.min.js"></script>
<script src="jquery.simplePopup.js"></script>

2. Insert your content into the modal popup following the markup structure like this:

<div class="modal__wrapper is-hidden>
  <div class="modal__double js-modal__double">
    <div class="modal__content">
      <a href="#" class="modal__close js-modal__close"></a>
      <h1>Modal Title</h1>
      <p>Modal Content</p>
    </div>
  </div>
</div>

3. Add the CSS class 'modal__wrapper--example-theme' to the modal wrapper to create a modal dialog with a sliding up animation based on CSS3.

<div class="modal__wrapper is-hidden modal__wrapper--example-theme>
  <div class="modal__double js-modal__double">
    <div class="modal__content">
      <a href="#" class="modal__close js-modal__close"></a>
      <h1>Modal Title</h1>
      <p>Modal Content</p>
    </div>
  </div>
</div>

.modal__wrapper--example-theme { background: rgba(51, 51, 51, 0.2); }

.modal__wrapper--example-theme.is-invisible {
  -webkit-animation: example__hide-bg .5s;
  animation: example__hide-bg .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.modal__wrapper--example-theme.is-invisible .modal__content {
  -webkit-animation: example__hide .5s;
  animation: example__hide .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.modal__wrapper--example-theme.is-visible .modal__content {
  -webkit-animation: example__show .3s;
  animation: example__show .3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.modal__wrapper--example-theme .modal__content {
  width: 420px;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

/*
 * Custom animations
 */
@-webkit-keyframes 
example__hide {  0% {
}
 50% {
}
 100% {
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 opacity: 0;
 z-index: -1;
}
}

@keyframes 
example__hide {  0% {
}
 50% {
}
 100% {
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 opacity: 0;
 z-index: -1;
}
}

@-webkit-keyframes 
example__hide-bg {  0% {
}
 50% {
}
 100% {
 background: none;
 z-index: -1;
}
}

@keyframes 
example__hide-bg {  0% {
}
 50% {
}
 100% {
 background: none;
 z-index: -1;
}
}

@-webkit-keyframes 
example__show {  0% {
 -webkit-transform: translate3d(0, 50%, 0);
 transform: translate3d(0, 50%, 0);
}
 50% {
}
 100% {
 opacity: 1;
 z-index: 99999;
}
}

@keyframes 
example__show {  0% {
 -webkit-transform: translate3d(0, 50%, 0);
 transform: translate3d(0, 50%, 0);
}
 50% {
}
 100% {
 opacity: 1;
 z-index: 99999;
}
}

4. Displays the modal popup.

$('.element').simplePop();

5. Plugin's default options.

$('.element').simplePop({

  // CSS classes
  classHidden: 'is-hidden',
  classVisible: 'is-visible',
  classInvisible: 'is-invisible',
  classTall: 'is-tall',
  classBellow: 'is-bellow',
  classCloseButton: 'js-modal__close',
  classBackground: 'js-modal__double',

  closeOthers: true,
  closeOthersDelay: 200, //Miliseconds (Use with caution)

  // callbacks
  onOpen: function(){
    console.log('I am open');
  },
  onClose: function(){
    console.log('I am closed');
  },
  onIntentClose: function(){
    console.log('I am closed from the X');
  },
  onMistakeClose: function(){
    console.log('I am closed from the background');
  }

});

---

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