Animated & Responsive Modal Window with jQuery and CSS3 - Expose Modal

Expose is a super tiny responsive jQuery lightbox plugin which allows to create an animated modal window with CSS3 transitions and transforms.

How to use it:

1. Create an Html element to open a modal window.

<a href="#Popup">Modal</a>

2. Create the content with a close link for the modal window.

<div id="Popup" class="Modal">
  <div class="content">
    <h2>Modal Title</h2>
    <p>Modal Body</p>
    <a href="#" class="cancel">Cancel</a> <span class="close"></div>
</div>

3. The required CSS styles for the modal window.

.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  visibility: hidden;
}

.Modal .content {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 50%;
  padding: 50px;
  border-radius: 3px;
  background: #fff;
  transform: translate(-50%, -30%) scale(0);
}

.Modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 18px;
  height: 18px;
  padding: 5px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: #A38CDC;
  color: #fff;
}

.Modal .close:before { content: '\2715'; }

.Modal.is-visible {
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background .35s;
  -moz-transition: background .35s;
  transition: background .35s;
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  transition-delay: .1s;
}

.Modal.is-visible .content {
  -webkit-transform: translate(-50%, -30%) scale(1);
  -moz-transform: translate(-50%, -30%) scale(1);
  transform: translate(-50%, -30%) scale(1);
  -webkit-transform: transition: transform .35s;
  -moz-transform: transition: transform .35s;
  transition: transform .35s;
}

3. Include the necessary jQuery library in the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. Add the following JS snippet in your JS file.

$.fn.expose = function(options) {
	
  var $modal = $(this),
    $trigger = $("a[href=" + this.selector + "]");
  
  $modal.on("expose:open", function() {
  
  $modal.addClass("is-visible");
  $modal.trigger("expose:opened");
  });
  
  $modal.on("expose:close", function() {
  
  $modal.removeClass("is-visible");
  $modal.trigger("expose:closed");
  });
  
  $trigger.on("click", function(e) {
  
  e.preventDefault();
  $modal.trigger("expose:open");
  });
  
  $modal.add( $modal.find(".close") ).on("click", function(e) {
  
  e.preventDefault();
  
  // if it isn't the background or close button, bail
  if( e.target !== this )
    return;
  
  	$modal.trigger("expose:close");
  });
  
  return;
}

5. Active the modal window.

$("#Popup").expose();

// Close Button

$(".cancel").on("click", function(e) {
  e.preventDefault();
  $(this).trigger("expose:close");
});

6. Callbacks.

$("#Popup").on("expose:opened", function() {
  alert("Modal Opened!");
});

$("#Popup").on("expose:closed", function() {
  alert("Modal Closed!");
});

---

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