如何使用layer弹窗

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

如何使用layer弹窗相关推荐

php程序layer,php 提交表单关闭layer弹窗iframe的实例讲解
介绍一款非常好用的前端弹窗插件: 根据官方的API:layer的iframe弹窗 //iframe层-父子操作 layer.open({ type: 2, area: ['700px', '530px ...
layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法
layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法参考文章: (1)layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法 (2)https://www.cnblogs.com/chaoyu ...
vue怎样引入使用layer弹窗以及icon使用
vue怎样引入使用layer弹窗以及icon使用功能需求功能实现 1.在vue中引入layui-layer 2.引入jquery 3.在main.js中引入layui-layer 4.使用laye ...
视频教程-Layer 弹窗入门-jQuery
Layer 弹窗入门 2009年4月创办淄博日诺网络科技有限公司法人总经理 2016年负责中国传媒大学凤凰学院网站开发项目负责人 2017年参与负责用友软件理财项目开发郭孟涛 ¥39. ...
Layer弹窗回车执行确定按钮事件
layer.open({type: 1,content: 'Where is the love?',btn: ['确定'],success: function(layero, index){this. ...
layer打开弹窗时传递参数(content:)【layer弹窗插件】
在使用layer打开弹窗时,我希望带一些参数过去,进行某些判断. 直接就可以用链接+参数的方式即可. 1.JS代码 var userGrade=Mrant layer.open({ title: '权 ...
layer弹窗在键盘按回车将反复刷新_layer弹出层回车后反复弹出
问题描述:引入layer的包,然后通过一个按钮控制弹出层,但是偶然的情况下,发现回车后也能弹出,一直回车,一直弹...简单分析之后,可能有两个原因:一是焦点一直在那个按钮,把焦点移开可能是解决的办 ...
layer弹窗的iframe层怎么关闭。为什么设置的layer.iframeAuto(index)高度不能自适应
//在iframe页 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引.每个弹窗层都会分配一个索引.第一次点 ...
layer弹窗在IOS上，被软键盘挤到上边的解决方法
就像这种情况,经过多番请教跟尝试,找到一个能解决这个问题的方法,但可能有点笨重.就是在当前弹框里,设置offset的值,里边的值可以随意写,然后再下边给弹框追加一个样式即可. <!DOCTYPE ...

如何使用layer弹窗

如何使用layer弹窗相关推荐

最新文章

热门文章