Responsive and lightweight modal plugin.
v2.1.0
bower: bower install jquery.edbox --save
npm: npm install jquery.edbox --save
Examples
Target (DOM element)
html
<!-- DOM element -->
<div id="target">My #target element</div>

<!-- modal link -->
<a href="#" data-box-target="#target" class="link-target">Element target example</a>
js
//set edbox for the set of matched elements
$('.link-target').edbox();
My #target element
Element target example

Tip: A helper class ('.edbox-target') is applied to the target element when it gets inside the modal. So, if you want to show it only when it's inside the modal, set "display: none" to it and "display: block" on helper class.

HTML or Text
html
<!-- modal link -->
<a href="#" data-box-html="<div class='example-html'><h1>Hello there!</h1></div>" class="link-html">HTML content example</a>
js
//what about use a different animation option this time?
//this example uses "animate.css" library, take a look in "daneden.github.io/animate.css"
//you can make your own animation too
$('.link-html').edbox({
    animateOpen: 'animated tada',
    animateClose: 'animated flipOutX'
});
HTML content example
URL load
html
<!-- use href attribute -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>
js
//set edbox for the set of matched elements
$('.link-url').edbox({
    //add an extra class to the modal for an especific style
    addClass: 'example-url',
    width: 900
});
URL load example
Image load
html
<a href="#" class="link-image">Image load example</a>
js
//set edbox for the set of matched elements
$('.link-image').edbox({
    image: 'curitiba-brazil.jpg'
});
Image load example
Options
Option Type Default Description
target string null DOM element
html string null html and/or text
image string null image path
url string null url path (files, pages, etc...)
width number null Set a fixed width value to the modal
height number null Set a fixed height value to the modal
addClass string null Adds a especific class to the modal
header string null Optional header tag - accepts html and/or text
footer string null Optional footer tag - accepts html and/or text
close boolean true Makes the modal closable or not.
events: keydown (esc) / click ('x' icon or outside the modal)
animation boolean true Makes the modal animable or not.
animateOpen string 'edbox-animate-open' CSS animation class on open
animateClose string 'edbox-animate-close' CSS animation class on close
beforeOpen function function() {} Function callback before open the modal
beforeClose function function() {} Function callback before close the modal
afterOpen function function() {} Function callback after open the modal
afterOpen function function() {} Function callback after close the modal
Attributes
Option Attribute
target data-box-target
html data-box-html
image data-box-image
url data-box-url
header data-box-header
footer data-box-footer
Methods
//set edbox for the set of matched elements
$('.myModalLink').edbox({ options });

//Init without assigning any element
$.edbox({ options });

//Make custom settings as defaults
$.edboxSettings({ options });

//Close event
$.edbox('close');
Changelog
v2.0.0 v2.1.0
Author

Eduardo Moreno
Webdesiger | Front-end developer