精华内容
下载资源
问答
  • layer是一款近年来备受青睐的web弹层组件,这完全得益于她全方位的解决方案。她致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中,layer总是能轻易获胜。她尽可能地...

    概要

    layer是一款近年来备受青睐的web弹层组件,这完全得益于她全方位的解决方案。她致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。

    文档与演示 (所有效果都在这里)

    愿景

    layer致力于打造国内最盛行的弹层组件,为web开发提供强劲动力。

    现状

    因着数年的坚持维护,截至到2017年03月21日,已运用在超过30万家Web平台,其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案,并且她仍在与Layui一并高速发展。

    相关

    官网社区

    也支持手机版

    https://layer.layui.com/mobile/

    如何使用

    先下载下来源码

    下载地址

    https://github.com/sentsin/layer

    放入到自己的js中

    D:\devlop\phpStudy\PHPTutorial\WWW\mall\static\js

    导入一次 便可永久在js中使用

    <script src="./static/js/jquery-1.10.2.min.js"></script>
    <script src="./static/js/layer/layer.js"></script>

     

    <script>
        $(function () {
            $('#test').click(function () {
                //配置一个透明的询问框
                layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了', '哦']
                });
    
    
            });
    </script>

    表单验证错误提示

    简写

    layer.tips("商品名称应该再1-500字符之间",'#name',{time:2000,tips:2});

    以下是项目中使用到的地方 

     <form action="publish.php" method="post" name="publish-form" id="publish-form" enctype="multipart/form-data">
                    <div class="additem">
                        <label id="for-name">商品名称</label><input type="text" name="name" id="name" placeholder="请输入商品名称">
                    </div>
                    <div class="additem">
                        <label id="for-price">商品价格</label><input type="text" name="price" id="price" placeholder="请输入商品价格"> 元
                    </div>
                    <div class="additem">
    <!--                    使用accept html5属性 声明仅接受png gif jpeg格式的文件-->
                        <label id="for-file">商品缩略图</label><input type="file" accept="image/png,image/gif,image/jpeg,image/jpg" id="file" name="file">
                    </div>
                    <div class="additem textwrap">
                        <label class="ptop" id="for-des">商品简介</label><textarea id="des" name="des" placeholder="请输入商品简洁"></textarea>
                    </div>
                    <div class="additem textwrap">
                        <label class="ptop" id="for-content">商品详情</label>
                        <div class="container" style="margin-left: 120px">
                            <textarea id="content" name="content"></textarea>
                        </div>
                    </div>
                    <button type="submit">发布</button>
                </form>
    <script>
        $(function () {
    
    
            $('#publish-form').submit(function () {
                var name=$('#name').val();
                var price=$('#price').val();
                var file=$('#file').val();
                var content=$('#content').val();
                var des=$('#des').val();
                if(name.length<=0||name.length>500){
                    layer.tips("商品名称应该再1-500字符之间",'#name',{time:2000,tips:2});
                    $('#name').focus();
                    return false;
                }
              if(!/^[1-9]\d{0,8}$/.test(price)){
                  layer.tips("请输入最多9位正整数",'#price',{time:2000,tips:2});
                  $('#price').focus();
                  return false;
              }
              if(file==""||file.length<=0){
                  layer.tips("请选择图片",'#file',{time:2000,tip:2});
                  $('#file').focus();
                  return false;
              }
                if(des.length<=0||des.length>100){
                    layer.tips("商品简介应该再1-100字符之间",'#des',{time:2000,tips:2});
                    $('#des').focus();
                    return false;
                }
                if(content.length<=0){
                    layer.tips("请输入商品详情",'#container',{time:2000,tips:2});
                    $('#content').focus();
                    return false;
                }
                return true;
    
    
    
            });
        })
    </script>

     

    展开全文
  • layer常用提示框用法

    万次阅读 2018-05-18 16:40:58
    layer的普通提示框 代码: layer.alert('次案件已回库,请选择其他案件', { icon: 5, title: "提示" }); title属性不设置时默认为“信息”。如下 二 layer 带输入框的提示框 注意!必须引入layer.js ...

    一 layer的普通提示框

    代码:

    layer.alert('次案件已回库,请选择其他案件', {

    icon: 5,

    title: "提示"

    });

    title属性不设置时默认为“信息”。如下

     

     

    二 layer 带输入框的提示框

    注意!必须引入layer.js   如果不行再引入他的延伸js layer.ext.js 或者layer3.0.1版本的layer.js

    代码:

     

    layer.prompt({

     formType: 2,

     value: '驳回!',

     title: '请输入驳回理由'

    }, function(value, index, elem){

    layer.close(index);

    //layer.alert(value);

    $.ajax({

    type: "post",

    url: "/visit/updateVisitApply",

    data: {

    "id": id,

    "status": "3",

    "reason":value

     

    },

    async: true,

     

    });

    layer.alert('驳回成功'); 

    location=location;

    });

     

       value:输入框的默认值

       title:提示框的标题

       layer.close(index);  点击确定后关闭提示框。

     

    三 layer 的判断提示框

    效果:

     

    代码:

    layer.confirm('您确定要删除这条数据吗?', {

    btn: ['确定','取消'] //按钮

    }, function()

    {

    layer.closeAll('dialog');

    $.ajax({

    type: "post",

    url: "${pageContext.request.contextPath}/cuishou/delete",

    data: {

    "id": id

    },

    success : function(data){

     

    }

    });

    });

    layer.closeAll('dialog');  点击确定关闭提示框

     

    四 layer的iframe弹框

    效果:在页面中弹出一个子页面。调用别的jsp

    代码:

    首先先定义

    //定义全局变量

    var myLayer = {

    index : 0,

    close : function() {

    layer.close(this.index);

    location.reload();

    },

    parentCaseIds : function() {

    var array = new Array();

    var checks = $("table tr td input[type='checkbox']:checked");

    $.each(checks, function() {

    var dataId = $(this).parent().parent().attr("data-id");

    if (dataId)

    array.push(dataId);

    });

    return array;

    }

     

     

    };

    $("#roleSelect").on("click",function(){

    var userId = $("input[type='radio']:checked").val();

    if(typeof(userId)=='undefined'){

    layer.alert('请选择员工', {

    icon: 5

    });

    return;

    }else{

    //弹出框分配角色界面

              myLayer.index=layer.open({

               type: 2, 

               title: "角色分配",

               area: ['400px','300px'],

               content:'${pageContext.request.contextPath }/cuishou/roleList?emplist=${emplist}&userId='+userId+''

              }); 

    }

    });

     

    获取父页面table选中行的参数

    js代码:

    //获取被选中的tr

    var id=$('.selected', window.parent.document).find(".needid").attr('data-id');//获取父页面单选选中的自定义id值

    var visitid=$('.selected', window.parent.document).find(".visitid").html();//获取父页面单选选中的行的td根据td的class获取td内容

    var empId = $("input[type='radio']:checked").val();//获取本页面单选框的值

    var appointName=$("input[type='radio']:checked").parents("tr").find(".appointName").html();//获取本页面单选选中的行根据td的class获取td内容

    展开全文
  • layer提示框

    2019-06-17 14:37:20
    使用layer提示需要layer.js插件,引用好插件,下面是layer提示框的一些用法: layer.open({ content:"这里是提示内容!",//这里是提示的内容,不写的话默认是空 btn:["确定","取消"],//提示框的按钮,可以定义...

    使用layer提示需要layer.js插件,引用好插件,下面是layer提示框的一些用法:

    layer.open({
    		content:"这里是提示内容!",//这里是提示的内容,不写的话默认是空
    		btn:["确定","取消"],//提示框的按钮,可以定义无限个按钮,用逗号分隔,如果不添加,默认是"确定"按钮
    		yes:function(){//点击确定(第一个按钮)后触发的方法
    	        alert("点击确定触发的方法!");
               //return false;//解开该代码注释可以禁止点击该按钮关闭提示框
    		},
          btn2:function(){//点击取消(第二个按钮)后触发的方法
    	        alert("点击取消触发的方法!");
               //return false;//解开该代码注释可以禁止点击该按钮关闭提示框
    		},
    		cancel:function(){//点击右上角的关闭按钮后触发的方法
    				alert("点击右上角的关闭按钮后触发的方法!");
               //return false;//解开该代码注释可以禁止点击该按钮关闭提示框
    		},
    		anim: 1,//出场效果(0平滑放大,默认的。1从上掉落。2从最低部往上滑入。3从左滑入。4从左翻滚。5渐显。6抖动)
    		icon:1,//提示框的提示图标(0警告。1成功。2错误。3提示。4锁定。5哭脸。6笑脸)
          title:"这里是提示框的标题!",//提示框的标题,默认是"信息"
          type:0,//提示框类型,默认是0信息框
          btnAlign:"r",//按钮的排列位置,默认是"r"。("l"按钮左对齐。"c"按钮居中对齐。"r"按钮右对齐,默认的。)
          time:3000,//自动关闭提示框,默认是不会关闭的,可以设置默认关闭提示框的时间
    });
    
    展开全文
  • layer.js确认

    2020-03-17 15:56:52
    layer.js的确认写法: 前提是在页面html里加载layer.js的路径 <script src="./../../../static/plugins/layer/layer.js"></script> layer.confirm('确定要一键部署?', {icon: 3, title: '系统...
    layer.js的确认框写法:
    

    前提是在页面html里加载layer.js的路径

    <script src="./../../../static/plugins/layer/layer.js"></script>
    layer.confirm('确定要一键部署?',
       {icon: 3, title: '系统提示'}, 
       function (index) {
        layer.close(index);
        isDeploy=true;
        deploy(isDeploy);
    });

    function函数里写确定事件函数,如果选择“取消”按钮,默认是关闭窗体的。

    比起js自带的确认提示框,layer.confirm()方法的界面好看,而且重要的是没有左上角的losthost:8080提示。

    效果图:

    展开全文
  • layer提示框出现以后跳转

    千次阅读 2019-11-27 15:13:36
    //点击弹出确认以后执行的函数!...layer.open({ title:"提示信息", btn:["确认","取消"], yes:function(){ //点击确认后进入的函数 } }) //设定弹出时间..自动跳转 self.setInterval(function(){ ...
  • layer弹出晃动

    千次阅读 2017-08-28 10:33:19
    layer.msg('请选择查询日期', { icon: 2 ,time: 8*1000, shift: 6 });
  • VUE用layer实现弹出提示框

    千次阅读 2019-06-19 20:01:34
    效果图 步骤如下: 1.安装vue-layer npm install vue-layer 2.引入layer ...import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue)...3.在页面中使用layer实现弹出提示框 html代码 <li class="...
  • layui 页面错误弹窗提示

    千次阅读 2021-03-22 11:15:47
    错误弹窗的数据内容:bug原因+bug定位 ** 后端代码: try { //略 } catch (Exception e) { log.error("系统错误!"+e.getMessage()+",paramMap:"+JSON.toJSONString(paraMap),e); StringWriter ...
  • layer框架的用法

    千次阅读 2018-06-27 10:24:16
    1.layer.open函数 ...提示&lt;/div&gt;', content: '&lt;div style="text-align:center;color:#000"&gt;'+data.data+'&lt;/div&gt;', btnAlign: 'c', //按钮...
  • 关于Layer弹出初探

    2019-09-16 15:35:04
    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,la...
  • 在使用layer弹框的时候,我下了两个版本的layer。一个是3.1.0一个是2.1.5...但是当我用2.1.5的版本的时候布局什么都ok,但是使用弹窗组建的时候会报layer is not underfined的错误。   然后我开始还一直在考虑是不
  • 源码中用了相对较大的篇幅来定制了这个msg,目的是想将其打造成露脸率最高的提示框。 它简单,而且足够得自觉,占据很少的面积,默认3秒后自动消失。 坚持简陋的变化,在作用方面,坚持零用户操作,参数自动补齐。 /...
  • parent.layer.close(parent.uploadIndex); } parent.searchClick(); } }); $("#file6").on('fileuploaderror', function(event, data, previewId, index){ //该方法将在上传出現異常触发 ...
  • 要求开始第二个加载层(离线上传)执行后,有一个计时的提示,表名已经运行了多少秒但我这个没有效果,一直是0,应该改成什么样才行? 弹出的提示消息一直是: 连接结束,正在进行离线文件上传,请稍等... 已...
  • 支付成功后关闭此弹出层,并提示项目投递成功,然后再跳转到其他页面。为了监控微信二维码扫码支付是否成功。我利用了每隔三秒,查询下支付订单,查看支付订单的支付状态是否改变。在实际操作中由于使用的是location...
  • 弹出提示错误 function qxMsg(msgStr) { layer.open({ type: 1, title: '提示消息', offset: '10%;', content: '<div xss=removed>'+msgStr+'</div>', btn: '关闭', btnAlign: 'c', shade: 0.2, yes: ...
  • ${pageContext.request.contextPath}/layer-v3.1.1/layer/layer.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;${pageContext.request.contextPath}/layui-v2.3.0/...
  • layer弹窗的一些样式问题

    万次阅读 2017-01-12 10:30:00
    昨天在改一个页面的弹窗样式的时候搞得我不要不要的,页面上有一个用来提示layer弹窗,弹窗要给用户提示一个消息,还要提供给用户两个用来选择点击的按钮,layer弹窗里面如果加了按钮的话,默认第一个按钮和后面的...
  • 今天要实现一个如果输入错误提示正确答案的需求,最开始的想法是直接在原输入框显示正确答案,但是这样很丑陋,但是又因为这个项目主要的功能和界面已经写好,我只是负责维护和进行小的修改,所以想了想如何实现...
  • 最近遇到一些问题,用layer提示消息,比如删除时,提示消息确定后 return false时,则不管用了,因为layer不支持阻塞,下面就解决一下这个问题:(本文使用Xcode,如要学习,请复下面连接到地址栏:...
  • layer.alert|layer.msg图标

    千次阅读 2020-03-31 15:01:28
    icon:16 为loading
  • 解决方法:需要使用layer对象,需先初始化,如下: layui.use('layer', function () { var layer = layui.layer; layer.open({ }); }); /*跳转网页*/ function goOtherWebsite(websiteName, websiteUrl) { ...
  • SSM框架JSP使用Layui实现layer弹出层

    千次阅读 2019-12-16 21:40:49
    最近做的系统里,使用layui...但是有关键的一步必须要做,也是许多新手会常犯的错误,就是没有预定义layui的form和layer,导致表单和弹出层不显示。 下面是layui的预定义。 layui.use(['jquery', 'table', 'layer', ...
  • 使用layer改造默认alert弹窗

    千次阅读 2018-09-14 10:15:54
    function alert(msg) {... layer.msg(msg, { time : 2000 }); } alert("请选择预约日期"); 也可以加上icon: function alert(msg) { layer.msg(msg, { icon : 0, time : 2000 ...
  • $("#btn1").click(function () { /*支持内容中写代码等等*/ layer.alert("一叶遮天", {//内容,属性,点击yes后触发的行为 title: "我是一个小小的警告窗口",//设置标题 area: ["500px", "300px"],//设置弹出大小 ...
  • errorPlacement: function(error, element) { //错误信息位置设置方法 error.prependTo(element.parent()); //这里的element是录入数据的对象 }, showErrors: function(errorMap, errorList) { this....
  • 问题 在前后端分离的情况下ajax请求接口之后,可能需要弹出层提示用户错误信息(例如密码错误)。非前后端分离情况下,通常... 将js脚本写入视图页面(类似xss),然后再js脚本里面使用layui.layer。 代码 控制器 protec...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,179
精华内容 5,671
热门标签
关键字:

layer错误提示框