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.