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文件。
登录后复制
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');
登录后复制
以上就是关于jquery.edbox插件的使用方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2778451.html
