Easy jQuery Modal Plugin with CSS3 Animations - Quick Modal

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