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

File Size: 1.92 KB
Views Total: 2075
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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'; } {
  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;
} .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="//"></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.on("expose:close", function() {
  $trigger.on("click", function(e) {
  $modal.add( $modal.find(".close") ).on("click", function(e) {
  // if it isn't the background or close button, bail
  if( !== this )

5. Active the modal window.


// Close Button

$(".cancel").on("click", function(e) {

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.