layer弹出层的简单使用

layer弹出层的简单使用一 layer 的 icon 样式以上样式测试代码 layer confirm icon 测试 icon 1 title 提示 function index dosomethinga 确认 layer close index 二 询问框官方案例 询问框 layer co

一、layer的icon样式

layer弹出层的简单使用

以上样式测试代码:

layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){     //do something     alert("确认");     layer.close(index);   });  

 

 

二、询问框

官方案例:

//询问框   layer.confirm('您是如何看待前端开发?', {     btn: ['重要','奇葩'] //按钮   }, function(){     layer.msg('的确很重要', {icon: 1});   }, function(){     layer.msg('也可以这样', {       time: 20000, //20s后自动关闭       btn: ['明白了', '知道了']     });   });  

本人所用到,需要修改标题,正如以上测试样式时的代码一样,实现自定义标题:

var message = "确定继续?";          //询问框          layer.confirm(message, {icon: 3, title:'信息提示'}, function(index){              //submitForm();              layer.close(index);          });  

 

 

 

三、提示层

 

官方案例:

//提示层   layer.msg('玩命提示中');  

 

默认关闭时间是3秒,效果如下(背景是官网的广告,实际效果是黑色半透明):

layer弹出层的简单使用

 

 

自定义样式以及时间,代码如下:

layer.msg('操作成功!', {icon: 6, time: 2000});  

icon样式是6,关闭时间为2秒。效果如下:

 

layer弹出层的简单使用

四、弹框(自定义页)

官方案例:

//自定页   layer.open({     type: 1,     skin: 'layui-layer-demo', //样式类名     closeBtn: 0, //不显示关闭按钮     anim: 2,     shadeClose: true, //开启遮罩关闭     content: '内容'   });  

效果如下:

 

layer弹出层的简单使用

本人使用案例,使用layer实现弹框登录:

layer.open({    
           type: 2,    
           title: '用户登录',    
           maxmin: true,    
           skin: 'layui-layer-lan',    
           shadeClose: true, //点击遮罩关闭层    
           area : ['400px' , '280px'],    
           content:'login.html'//弹框显示的url,对应的页面  
       });    

其中‘login.html’是登录页面,其效果如下:
layer弹出层的简单使用

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/231022.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 系统不支持curl

    系统不支持curl解决安装pinphp时出现的“系统不支持curl!”今天在本机安装phppin开源程序时,提示“系统不支持curl!”错误。由于我本机是UBUNTU系统,所以直接通过apt-get进行安装。sudo

    2022年6月30日
    32
  • mysql 时区设定_mysql的时区设置「建议收藏」

    mysql 时区设定_mysql的时区设置「建议收藏」IDEA配置mysql数据库时,地址,用户名,密码,数据库名填写之后,点测试连接,提示Serverreturnsinvalidtimezone.Goto’Advanced’tabandset’serverTimezone’prope如图翻译过来就是:服务器返回无效时区。进入“高级”选项卡,手动设置“serverTimezone”属性。网上查询了一下解决方案,原来是要设置时区…

    2025年7月4日
    3
  • wicket session

    wicket session1.getWebRequestCycle().getWebRequest().getHttpServletRequest().getSession().setAttribute("showMessage",1);ObjectshowMessageObj=getWebRequestCycle().getWebRequest().getHttpServletRequest().ge…

    2025年7月30日
    4
  • 【原创】ERROR 1142 (42000): command denied to user 引发的权限不足问题[亲测有效][通俗易懂]

    【原创】ERROR 1142 (42000): command denied to user 引发的权限不足问题[亲测有效][通俗易懂]mysqlgrants引发的权限不足问题[42000]基于mysql5.7.x1、先退出mysql,找到mysql的配置文件我的文件在这里./etc.my.cnf2、然后重新启动mysql,3、进入mysql,切换到mysql数据库,找到user表,查看user表的权限:4、修改权限,基于mysql5.7.x正常创建数据库查看权限>>>showgrants;…

    2022年9月1日
    3
  • java.util.scanner sc_Java的Scanner sc=new Scanner(System.in)是什么意思「建议收藏」

    java.util.scanner sc_Java的Scanner sc=new Scanner(System.in)是什么意思「建议收藏」展开全部当通过newScanner(System.in)创建一个Scanner,控制台会一直等待输入,62616964757a686964616fe58685e5aeb931333433653935直到敲回车键结束,把所输入的内容传给Scanner,作为扫描对象。如果要获取输入的内容,则只需要调用Scanner的nextLine()方法即可。例:importjava.util.Scanner;…

    2022年7月20日
    16
  • MiFlash提示“错误代码”为“0xffffffff”[通俗易懂]

    MiFlash提示“错误代码”为“0xffffffff”[通俗易懂]当MiFlash提示“未指定的错误”时,我们可以根据其后的错误代码来寻求问题的解决方法。当MiFlash提示“错误代码”为“0xffffff01”时,表明“MiFlash找不到指定的文件”。对此我们可以通过以下方法来解决:右击“计算机”图标,从弹出的右键菜单中选择“属性”项。从打开的“系统属性”窗口中,点击左上角的“高级系统设置”按钮进入详细设置界面。待打开“系统属性”窗口后,切换到“高级”选项卡,点击“环境变量”按钮打开其设置对话框。从打开的“环境变量”窗口中,从“系统变量”列表中找到“Path

    2022年5月16日
    101

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号