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文件。
DBShop开源商城系统,使用PHP语言基于Laminas(Zendframework 3) + Doctrine 2 组合框架开发完成。可定制、多终端、多场景、多支付、多货币;严谨的安全机制,可靠稳定;方便的操作管理,节约时间;清晰的权限分配,责任分明;便捷的更新处理,一键搞定;丰富的插件市场,扩展无限。
HTML结构
最简单的模态窗口的使用方法是使用一个
来作为模态窗口内容的容器,在它里面可以放置HTML,文本,图片和AJAX内容等。
模态窗口内容
然后通过一个超链接或按钮来触发模态窗口。
打开模态窗口
初始化插件
在页面DOM元素加载完毕之后,通过edbox();方法来初始化该模态窗口插件。
$('.trigger-link').edbox();模态窗口中加载HTML,图片和AJAX内容
在模态窗口中加载HTML内容的方法如下:在data-box-html属性中填写你的HTML内容即可。
这是HTML内容" >模态窗口内容
$('.trigger-link').edbox();添加图片的方法如下:
Image load example
$('.link-image').edbox({
image: 'curitiba-brazil.jpg'
});添加AJAX内容的方法如下:
URL load example
$('.link-url').edbox({
//add an extra class to the modal for an especific style
addClass: 'example-url',
width: 900
});方法
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');









