Minimal Responsive Modal Popup Plugin With jQuery - popup.js
File Size: | 4.4 KB |
---|---|
Views Total: | 5890 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jquery.popup.js is a jQuery popup plugin used to a responsive, animated, mobile-friendly modal windows using content from within the page.
How to use it:
1. Link to the jQuery popup.js plugin's CSS file.
<link rel="stylesheet" href="css/jquery.popup.css"></link>
2. Link to jQuery JavaScript library and the jQuery popup.js plugin's JavaScript file jquery.popup.js
.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/jquery.popup.js"></script>
3. Create an element for the background overlay.
<div class="p_body js__p_body js__fadeout"></div>
4. Create the modal content as follows:
<div class="popup js__popup js__slide_top"> <div class="popup__header"> Modal Title <a href="#" class="p_close js__p_close" title="Закрыть"> <span></span><span></span> </a> </div> <div class="p_content"> Modal Content </div> <div class="popup__footer"> <button class="js__p_close">Close</button> </div> </div>
5. Attach the plugin to the trigger element and done.
<button class="js__popup">Open Pop-Up</button>
$(function () { $('.js__popup').popup(); });
6. Enable/disable the background overlay.
$(function () { $('.js__popup').popup({ background: true }); });
6. Decide whether to close the modal popup by pressing the ESC key.
$(function () { $('.js__popup').popup({ escClose: true }); });
7. Decide whether to center the modal popup.
$(function () { $('.js__popup').popup({ center: true }); });
8. Set the position from which the modal window slides into the web page.
$(function () { $('.js__popup').popup({ appearance: 'top' // ('left' | 'right' | 'bottom') }); });
This awesome jQuery plugin is developed by Drag731. For more Advanced Usages, please check the demo page or visit the official website.