v2.5.0
Responsive and lightweight modal plugin.
npm install jquery.edbox
yarn add jquery.edbox
yarn add jquery.edbox
<a href="#" edbox data-box-target="#target">Element target example</a>
<div id="target">My #target element</div>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.
Tip: Use {copy: true} option or data-box-copy="true" attr tag to render a copy/clone of the target element instead of the element itself. This option only works with target option.
<!-- This example uses "animate.css" library by Daniel Eden, take a look at "daneden.github.io/animate.css" -->
<a href="#" class="link-html"
data-box-html="<div class='example-html'>Hello there!</div>"
data-box-animate-open="animated tada"
data-box-animate-close="animated flipOutX">
HTML content example
</a>$('.link-html').edbox();<!-- use href or data-box-url attribute -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>$('.link-url').edbox({
//add an extra class to the modal for an especific style
addClass: 'example-url',
width: 900
});<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>$('.link-image').edbox({
image: 'curitiba-brazil.jpg'
});//Success
$.edbox({ success: '<i><b>Success</b></i> request!' });
//Info
$.edbox({ info: 'Some text or <html> info!' });
//Warning
$.edbox({ warning: '<b>Warning</b>, <i>do not go ahead</i>!' });
//Danger
$.edbox({ danger: 'Sorry,<br>unespected error!' });| Option | Tag Attribute | Type | Default | Description |
|---|---|---|---|---|
| target | data-box-target | string | null | DOM element |
| copy | data-box-copy | boolean | false | Use a copy of the element target instead of the element itself. Only works with target option |
| html | data-box-html | string | null | html and/or text |
| image | data-box-image | string | null | image path |
| url | data-box-url | string | null | url path (files, pages, etc...) |
| success | data-box-success | string | null | Alert success |
| info | data-box-info | string | null | Alert info |
| warning | data-box-warning | string | null | Alert warning |
| danger | data-box-danger | string | null | Alert danger |
| header | data-box-header | string | null | Optional header tag - accepts html and/or text |
| footer | data-box-footer | string | null | Optional footer tag - accepts html and/or text |
| width | data-box-width | number | null | Set a fixed width value to the modal |
| height | data-box-height | number | null | Set a fixed height value to the modal |
| addClass | data-box-add-class | string | null | Adds a especific class to the modal |
| close | data-box-close | boolean | true | Makes the modal closable or not.
events: keydown (esc) / click ('x' icon or outside the modal) |
| animation | data-box-animation | boolean | true | Makes the modal animable or not. |
| animateOpen | data-box-animate-open | string | 'edbox-animate-open' | CSS animation class on open |
| animateClose | data-box-animate-close | string | 'edbox-animate-close' | CSS animation class on close |
| beforeOpen | data-box-before-open | function | function() {} | Function callback before open the modal |
| afterOpen | data-box-after-open | function | function() {} | Function callback after open the modal |
| beforeClose | data-box-before-close | function | function() {} | Function callback before close the modal |
| afterClose | data-box-after-close | function | function() {} | Function callback after close the modal |
//set edbox for the set of matched elements
$('.myModalLink').edbox({ options });
or $('[edbox]').edbox({ options });
//Init without assigning any element
$.edbox({ options });
//Make custom settings as defaults
$.edboxSettings({ options });
//Close event
$.edbox('close');
Eduardo Moreno
Webdesiger | Front-end developer