Easy jQuery Modal Plugin with CSS3 Animations - Quick Modal

An easy, fast jQuery plugin which helps you create a modal window with nice animations powered by CSS3 transitions and transforms.

How to use it:

1. Embed your modal content into a container element with an unique ID.

<div id="demo" class="modal">
  <div class="close-modal"></div>
  Modal content here
</div>

2. Create a modal toggle link that points to the modal ID using data-modal-id attribute.

<a href="#" data-modal-id="demo" class="open-modal">Open Modal</a>

3. Add JQuery library and the jQuery Quick Modal plugin to your web page.

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

4. Call the plugin on the toggle link.

$('.open-modal').quickmodal();

5. Style the modal window in your CSS.

.modal {
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  box-sizing: border-box;
  padding: 18px;
  background-color: #8E44AD;
  color:#fff;
  border-radius: 3px;
  width: 50%;
  display: none;
  opacity: 0;
  margin-top: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 9999;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.modal.visible {
  opacity: 1;
  margin-top: -100px;
  transform: translate(-50%, -50%) scale(1);
}

6. Style the modal close button.

.modal .close-modal {
  position: absolute;
  top: 0;
  right: 0;
  padding: 18px;
  cursor: pointer;
  color: #ccc;
}

.modal .close-modal:after {
  content: '\2716';
  display: inline-block;
  font-size: 20px;
}

.modal .close-modal:focus { outline: none; }

7. Style the modal background.

#modal-background {
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  display: none;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#modal-background.visible { opacity: 1; }

8. Available options.

// Animation CSS
animation: 'fade-zoom',

// Animation speed
speed: 250,

// timing funciton
timing: 'ease',

// CSS selector for close link
closeModalSelector: '.close-modal',

// ESC key to close the modal
enableEsc: true,

// Click to close the modal
enableClickAway: true,

// Enable body scroll on modal open
enableBodyScroll: false

Change logs:

v2.1.0 (2017-08-29)

• Fixed an issue where modal backdrops were not animating properly when closing a modal
• Added the prefix option to support builds with custom prefixes
• Added Sass source files and Gulp tasks to support builds with custom prefixes
• The plugin now runs in strict mode

v2.0.0 (2017-08-22)

• Updated all HTML classes and ids to use the qm- prefix
• Updated all events to use the .qm namespace
• Updated versioning to semantic style
• Removed CSS vendor prefixes (no longer needed)
• Demoted console logs for incorrect configuration to warn level (was error level)

2015-10-06

• 1.06: Added appendBackgroundTo option; Fixed an issue where two modal backgrounds could be appended through a specific combination of bindings

2015-09-30

• 1.06: Added appendBackgroundTo option; Fixed an issue where two modal backgrounds could be appended through a specific combination of bindings

2015-09-17

• 1.05: Code cleanup for maintainability

2015-08-04

• 1.04: added enableBodyScroll option

2015-07-30

• v1.0.3: Firefox fixes.

2015-07-23

• Added overflow fix

2015-07-22

• Updates to the trigger method.
• Added AJAX compatibility

2015-07-21

• added enableEsc and enableClickAway options

2015-07-11

• Fixed issue where close method was ignoring the specified settings, using the already applied settings instead;
• Fixed issue where close modal selector was not binding correctly

---

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