jQuery轻量级模态窗口对话框

Examples

Target (DOM element)

html

<a href="#" edbox data-box-target="#target">Element target example</a>
<div id="target">My #target element</div>

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.

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.

HTML or Text

html

<!-- 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>

js

$('.link-html').edbox();

HTML content example

URL load

html

<!-- use href or data-box-url attribute -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>

js

$('.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" data-box-header="Curitiba - Parana - Brazil">Image load example</a>

js

$('.link-image').edbox({
image: 'curitiba-brazil.jpg'
});

Image load example

Alerts

//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!' });