Easy Responsive Modal Popup jQuery Plugin - TopModal
File Size: | 6.09 KB |
---|---|
Views Total: | 2274 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The TopModal jQuery plugin lets you create responsive, easy-to-customize and easy-to-improve modal windows for your web applications.
How to use it:
1.Add jQuery library together with the jQuery TopModal plugin's JS & CSS files into the webpage.
<link rel="stylesheet" href="topmodal.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="topmodal.js"></script>
2. Wrap your modal content into a DIV container with the CSS class of 'topmodal'.
<div class="topmodal js-topmodal"> ... Modal Content ... </div>
3. By default, the modal window will be closed by clicking on the blank area of the background overlay. You can also add a close button inside the modal window like this:
<div class="topmodal js-topmodal"> ... Modal Content ... <button class="js-topmodal-btn-close">Close</button> </div>
4. Add the CSS class 'js-topmodal-btn' to the modal toggle button:
<button class="js-topmodal-btn">Popup</button>
5. Initialize the TopModal and done.
$('.js-topmodal').topmodal();
6. Default plugin settings.
$('.js-topmodal').topmodal({ // CSS selector for modal window popup: '.js-topmodal', // CSS selector for toggle button popupBtn: '.js-topmodal-btn', // CSS selector for close button popupBtnClose: '.js-topmodal-btn-close', // CSS selector for background overlay popupOverlay: '.js-topmodal-overlay' });
Change log:
2016-09-17
- cleanup
2016-09-16
- add Handler Methods
2016-09-15
- replace popup to modal
2016-09-12
- JS and styles update
This awesome jQuery plugin is developed by wallbanger. For more Advanced Usages, please check the demo page or visit the official website.