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
   
Responsive Lightweight Modal/Alert Plugin For jQuery - edbox2

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.