layer弹窗

最新推荐文章于 2024-09-26 07:41:32 发布

彧卿丶

最新推荐文章于 2024-09-26 07:41:32 发布

阅读量696

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Asa_Prince/article/details/81120469

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前端页面需求又双叕提过来了。~~~~

这次是删除图片后有个确认消息，只有点击确认按钮后才会刷新页面，点击x号不会刷新(其实已经是删除了的)。测试人员直接提过来BUG，图片点击x号没有删除！什么鬼，现在的测试都这样了吗？没有见过代码的吗都！表述都表述不清。翻白眼~~

删除图片的JS方法：

function delPic(id) {
    layer.confirm("确认删除？", function(idx) {
        $.ajax({
            url : BASE_PATH + "/attachment/removeFile.do?id=" + id,
            success : function(data) {
                if (data == 'ok') {
                    layer.alert("删除成功", function(ind) {
                        location.reload();
                    })
                }
            }
        })
    })
}

好吧，你不按正常人的操作，我给你把提示去掉。点击确认删除按钮，删除图片、刷新界面，一口气合成！也不知道这页面之前是谁写的，这么多提示干嘛....(来到这家公司时，页面代码都是有的)

改完后：

function delPic(id) {
    layer.confirm("确认删除？", function(idx) {
        $.ajax({
            url : BASE_PATH + "/attachment/removeFile.do?id=" + id,
            success : function(data) {
                if (data == 'ok') {
                    location.reload();
                }
            }
        })
    })
}

第二个BUG接踵而来了，上传图片成功之后又是有提示信息，和上面差不多的情形。

layer.alert( '上传成功',function(idx){
    form1.action=$("#backUrl").val();
    form1.submit();
 } );

layer的alert弹窗有确认按钮，右上角有一个x按钮，上面的function只有在点击确认按钮才会生效的啊！不得不服测试人员的鞠躬尽瘁，每个按钮都试一下，点击x号后理所当然的页面没有刷新呗，造成了仿佛图片没有上传的效果(图片其实已经上传了)！

本想将弹窗的x拿掉，操作人员只能点击确定，后来发现工程太大，需要改layer框架的源码。

想想之前也接触过一点layer，想起他的弹窗还有别的类型。查文档后改为：

  layer.msg("上传成功", {
        time: 1500, //1.5s后自动关闭
        icon: 7
      }, 
      function(){
      form1.action=$("#backUrl").val();
      form1.submit();
  });

依旧记录下layer弹窗的用法：

layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这五年多的坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力。目前，layer已成为国内最多人使用的web弹层组件，GitHub自然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在使用layer。

PS:

之前写过一篇“JS的弹窗函数执行的时候，程序会停止执行吗？”，得出结果，JS中的三个原生弹窗函数都会阻碍下面程序的执行。那对于layer插件中的这几个弹窗，是不是也都是阻碍效果呢？

layer.confirm是不能阻塞js语句流程的，不像系统自带的confirm。

阻塞的目的就是在某个任务结束之前，系统不会继续往下运行。layer.confirm()明显是个方法，function不过是一个匿名函数被作为变量传入罢了。confirm方法执行完成后，系统依然会继续执行，并不会等callback完成。

其实原生confirm阻塞也就是等待用户点击 “确定” “取消” “关闭（X）按钮”。

但是layer对事件的处理是很完善的。

yes:就是点击确定按钮的时候；
cancel :就是点击取消；
end:就是层在销毁的时候（等同于confirm结束的时候）

要实现原生confirm阻塞，那就把业务逻辑都放在对应的方法里。

在贴出代码

1 layer.alert('见到你真的很高兴', {icon: 6});

这是一个最简单的弹出层,可根据icon配置左边的图标

通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作

如图:

layer.alert('墨绿风格，点击确认看深蓝', {
    skin: 'layui-layer-molv' //样式类名  自定义样式
    ,closeBtn: 1    // 是否显示关闭按钮
    ,anim: 1 //动画类型
    ,btn: ['重要','奇葩'] //按钮
    ,icon: 6    // icon
    ,yes:function(){
        layer.msg('按钮1')
    }
    ,btn2:function(){
        layer.msg('按钮2')
    }});

看下效果图1.

code:

 layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
     time: 2000, //2s后自动关闭
     btn: ['明白了', '知道了', '哦']
 });

回调的例子:

code:

layer.msg('也可以这样', {
     btn: ['明白了', '知道了']
     ,yes: function(index, layero){
          layer.msg("按钮1回调,参数是:"+index)
     }
    ,btn2: function(index, layero){
         //按钮【按钮二】的回调
         layer.msg("按钮2回调,参数是:"+index)
         return false //开启该代码可禁止点击该按钮关闭
    }
});

code:

layer.open({
    type: 1
    ,title: "open方式弹出层" //不显示标题栏   title : false/标题
    ,closeBtn: true
    ,area: '300px;'
    ,shade: 0.8
    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
    ,resize: false
    ,btn: ['火速围观', '残忍拒绝']
    ,btnAlign: 'c'
    ,moveType: 1 //拖拽模式，0或者1
    ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
    ,success: function(layero){
         var btn = layero.find('.layui-layer-btn');
            btn.find('.layui-layer-btn0').attr({
                 href: 'http://www.layui.com/'
            ,target: '_blank'
        });
    }
});