layer可以独立使用,也可以通过Layui模块化使用。详见官网:
layer官网地址:http://www.layui.com/doc/modules/layer.html
在平时的项目中,很多时候页面中难免会用到弹窗的情况,这里介绍将layer作为独立插件使用的方法。
步骤一:去 layer 独立版本官网下载组件包。
步骤二:获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需根据路径引入 layer.js 即可。使用layer首先需在页面中引入jQuery1.8以上的任意版本,然后再引入layer.js才生效。
步骤三:上述步骤完成后,创建自己的js文件,在文件中即可使用layer弹窗了。示例:
layer.open({
content: 'test' //content可以是字符串,可以是DOM,也可以是一个URL
,btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
扩展:当layer 的 content为DOM时,引用方法推荐使用这种方法:
html代码如下:
<script class="addBankInfo" type="text/html">
<form action="">
<div class="addBankInfo" >
<table>
<tr>
<td>真实姓名:</td>
<td>甜甜</td>
</tr>
<tr>
<td>身份证号:</td>
<td>5002405676867</td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" name="phoneNo"></td>
<td>请填写该卡在银行预留的手机号码</td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" name="phoneCode"></td>
<td><button type="button">获取验证码</button></td>
</tr>
</table>
</div>
</form>
</script>
js代码如下:
$('body').on('click','.addBank',function () {
layer.open({
content: $('.addBankInfo').html()
,area: ['800px', '500px'] //自定义文本域宽高
,btn: ['确定', '取消']
,yes: function(){
//按钮【确定】的回调
}
,btn2: function(){
//按钮【取消】的回调
return 0;
}
});
})