Responsive Lightweight Modal/Alert Plugin For jQuery - edbox2
File Size: | 665 KB |
---|---|
Views Total: | 2047 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
edbox2 is a lightweight jQuery plugin for creating responsive, animated, customizable, AJAX-enabled modal windows and alert messages on the webpage.
Features:
- Easy to style via CSS.
- Custom modal header/footer content.
- Content loading spinner.
- Supports any content types: html, text, image, ajax content, etc.
- 4 types of alert messages: success, info, warning and danger.
- Custom open/close animations.
- Callback functions.
Installation:
# NPM $ npm install jquery.edbox # Bower $ bower install jquery.edbox
How to use it:
1. Include the edbox.css
inside your head section and the edbox.js
just before the closing body tag.
<link href="dist/edbox.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="dist/jquery.edbox.js"></script>
2. Load an animation library of your choice for more animations (OPTIONAL).
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
3. Display your inline element in the modal.
<div id="modal-content">Your Modal Content</div> <a href="#" data-box-target="#modal-content" class="trigger-link">Launch The Modal</a>
$('.trigger-link').edbox();
4. Or define your HTML content or plain text in the data-box-html
attribute as this:
<a href="#" data-box-html="Hello World!" class="trigger-link">Launch The Modal</a>
$('.trigger-link').edbox();
5. If you'd like to load an external HTML file into the modal via AJAX requests.
<a href="ajax.html" class="trigger-link">Launch The Modal</a>
$('.trigger-link').edbox();
6. Image lightbox is supported as well.
<a href="#" class="trigger-link">Launch The Modal</a>
$('.trigger-link').edbox({ image: '1.jpg' });
7. All possible options to customize the modal window.
$('.trigger-link').edbox({ // target container target : null, // use a copy of the element target instead of the element itself // only works with target option copy: false, // html content html : null, // path to image image : null, // path to external page url : null, // custom alert messages success : null, info : null, warning : null, danger : null, // custom width width : null, // custom height height : null, // addtional CSS class(es) addClass : null, // custom modal header header : null, // custom modal footer footer : null, // is closable? close : true, // enable animation animation : true, // CSS classes when the modal opens and closes animateOpen : 'edbox-animate-open', animateClose : 'edbox-animate-close' });
8. Callback functions.
$('.trigger-link').edbox({ beforeOpen : function() {}, beforeClose : function() {}, afterOpen : function() {}, afterClose : function() {} });
Change logs:
v2.4.0 (2018-03-26)
- [JS] - New data-box-clone tag attr option
- [JS] - New "edbox" tag attr option
v2.3.0 (2017-07-20)
- Now it's possible to use all options as tag attribute
v2.2.3 (2017-06-30)
- Change "scroll-true" class to the parent div
- Some CSS adjustments for better flexbox compatibility with Mozilla and IE browsers
v2.2.2 (2017-05-22)
- JS/CSS Improved close button positioning based on scrollbar width
- JS Other small improvements
- CSS New helper class added to the parent box if option close is false
v2.2.1 (2017-05-12)
- Improved url option;
- Improved header option;
- Improved validations;
- CSS adjustments;
v2.2.0 (2017-05-11)
- Fix image load;
- Fix callback afterClose;
- New alert options like bootstrap;
- New CSS properties and adjustments;
v2.1.0 (2017-05-10)
- New settable attributes "data-box-header" and "data-box-footer";
- Some CSS adjustments;
This awesome jQuery plugin is developed by eduardocmoreno. For more Advanced Usages, please check the demo page or visit the official website.