关于jquery.edbox插件的使用方法-js教程-PHP中文网

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开源商城系统

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');