jquery响应式模态窗口插件jquery.edbox

简要教程

jquery.edbox.js是一款轻量级的jquery响应式模态窗口插件。通过该jquery模态窗口插件，你可以轻松的制作出响应式的，带动画效果的，可基于AJAX的模态对话框效果。它的特点还有：

• 可以通过CSS来改变模态窗口的样式。
• 可以自定义模态窗口的头部和脚部内容。
• 可以自定义加载的loading效果。
• 支持多种格式的内容：HTML，文本，图片和AJAX内容等。
• 支持4种alert情景模式：success，info，warning 和 danger。
• 可自定义打开和关闭模态窗口的动画。
• 支持回调方法。

 安装

可以通过npm或yarn来安装jquery.edbox.js插件。

npm install jquery.edbox   yarn add jquery.edbox

 使用方法

在页面中引入edbox.css文件,jquery和jquery.edbox.js文件。

< link href = "dist/edbox.css" rel = "stylesheet" > < script src = "js/jquery.min.js" ></ script > < script src = "js/jquery.edbox.js" ></ script >

 HTML结构

最简单的模态窗口的使用方法是使用一个<div>来作为模态窗口内容的容器，在它里面可以放置HTML，文本，图片和AJAX内容等。

< div id = "target" >模态窗口内容</ div >

然后通过一个超链接或按钮来触发模态窗口。

< a href = "#" edbox data-box-target = "#target" >打开模态窗口</ a >

 初始化插件

在页面DOM元素加载完毕之后，通过edbox();方法来初始化该模态窗口插件。

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

 模态窗口中加载HTML，图片和AJAX内容

在模态窗口中加载HTML内容的方法如下：在data-box-html属性中填写你的HTML内容即可。

< div id = "target" data-box-html="<div class = 'example-html' >这是HTML内容</ div >" >模态窗口内容</ div >

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

添加图片的方法如下：

< a href = "#" class = "link-image" data-box-header = "Curitiba - Parana - Brazil" >Image load example</ a >

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

添加AJAX内容的方法如下：

<!-- 使用 href 或者 data-box-url 属性 --> < 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 });

 配置参数

jquery.edbox.js模态窗口插件的可用配置参数有：

参数	data属性	类型	默认值	描述
target	data-box-target	string	null	DOM 元素
copy	data-box-copy	boolean	false	使用复制的元素来代替自己。仅对target选项有效。
html	data-box-html	string	null	html 或 text
image	data-box-image	string	null	图片的路径
url	data-box-url	string	null	url 路径 (files, pages等...)
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	可选的 header 标签 - 可以是html 或 text
footer	data-box-footer	string	null	可选的 footer 标签 - 可以是html 或 text
width	data-box-width	number	null	为模态窗口设置一个固定的宽度
height	data-box-height	number	null	为模态窗口设置一个固定的高度
addClass	data-box-add-class	string	null	为模态窗口设置一个指定的class名称
close	data-box-close	boolean	true	模态窗口是否可以关闭  events: keydown (esc) / click ('x' icon or outside the modal)
animation	data-box-animation	boolean	true	模态窗口是否可以动画
animateOpen	data-box-animate-open	string	'edbox-animate-open'	模态窗口打开时的CSS动画
animateClose	data-box-animate-close	string	'edbox-animate-close'	模态窗口关闭时的CSS动画
beforeOpen	data-box-before-open	function	function() {}	模态窗口打开时的回调函数
afterOpen	data-box-after-open	function	function() {}	模态窗口关闭时的回调函数
beforeClose	data-box-before-close	function	function() {}	模态窗口关闭之前的回调函数
afterClose	data-box-after-close	function	function() {}	模态窗口关闭之后的回调函数

 方法

jquery.edbox.js模态窗口插件的可用方法有：

//set edbox for the set of matched elements $( '.myModalLink' ).edbox({ options }); $( '[edbox]' ).edbox({ options });   //Init without assigning any element $.edbox({ options });   //Make custom settings as defaults $.edboxSettings({ options });   //Close event $.edbox( 'close' );

参考资料：http://www.makeru.com.cn/