Easy jQuery Modal Plugin with CSS3 Animations - Quick Modal
File Size: | 53.2 KB |
---|---|
Views Total: | 3283 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.