Layer插件的常用提示框，如何使用Layer

「爱情、让人受尽委屈。」 2023-02-17 12:28 22阅读 0赞

需要的插件：  
skin包下为图片不要忘咯

![20200614101457879.png][]  
测试7的效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE_size_16_color_FFFFFF_t_70][]  
open的方式就大概说一下测试代码没有写  
测试的时候可以试一下遮罩层效果很好，content可以放路径和指定要打开的标签对象。

layer.open(\{//捕获页  
                      type: 1,  
                      btn: \['确定', '取消'\],  
                      //shade: false, //默认开启遮罩层  
                      title: "折旧设置",    
                      area: \['755px', '650px'\], //宽高  
                      content: $('\#depreciationForm'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
                      cancel: function()\{  
                        //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', \{time: 5000, icon:6\});  
                      \}  
                    \})  
  
复制下面代码将插件路径修改就可以测试

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
    </head>  
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>  
    <script type="text/javascript" src="../js/bootstrap.min.js" ></script>  
    <script type="text/javascript" src="../js/layer.js" ></script>  
    <body>  
        <button οnclick="t1()">点击测试1</button>  
        <button οnclick="t2()">点击测试2</button>  
        <button οnclick="t3()">点击测试3</button>  
        <button οnclick="t4()">点击测试4</button>  
        <button οnclick="t5()">点击测试5</button>  
        <button οnclick="t6()">点击测试6</button>  
        <button οnclick="t7()">点击测试7</button>  
        <input type="button" id="test" οnclick="test()" value="校验"/>  
    </body>  
    <script>  
        function test()\{  
            layer.tips("测试校验！","\#test",\{//第一个参数为提示字体;二为在哪个的后面  
                    tips:\[2,"red"\],//第一个参数：1.上 2.右 3.下 4.左 提示方向,第二个为：颜色  
                    tipsMore:true,//true为不允许多个，false为允许多个  
                    time:5000\});//不设置时间默认两秒，这里是5秒关闭,设为0则不关闭  
        \}  
        function t1()\{  
            //layer.msg("测试成功！",\{time:1000\});  
            layer.msg('<div style="color:gray;">正在导出</div>', \{icon: 16\});  
        \}  
        function t2()\{  
            layer.msg("测试成功！",\{  
                time:2000,  
                icon:6,  
                btn:\['稍后重启','现在重启','不再提示'\]  
            \});  
        \}  
        function t3()\{  
            layer.prompt(  
                  \{  
                    formType: 2,  
                    value: '初始值',  
                    title: '标题'  
                \}, function(value, index, elem)\{  
                    alert(value); //得到value  
                    layer.close(index);  
                  \}  
            );  
        \}  
        function t4()\{  
            /\*var la = layer.load("导出中...");\*/  
            var la = layer.load(1,\{shade:\[0.1,'\#fff'\],time:1000\});//设置背景透明，false可以点击其他，true不可点击其他为背景黑色  
            /\*var la = layer.load(2, \{content:'<div style="color:gray;">导出...</div>',time: 1500,success: function(layero)\{  
                layero.find('.layui-layer-content').css(\{'padding-top':'35px','width':'50px'\});  
            \}\})\*/  
              
        \}  
        function t5()\{  
            layer.alert("测试成功！");  
        \}  
        function t6()\{  
            layer.alert("测试成功！",\{  
                time:2000,  
                icon:6,  
                btn:\['稍后重启','现在重启','不再提示'\]  
            \});  
        \}  
        function t7()\{  
            layer.alert("测试成功！",\{  
                skin: 'layui-layer-molv', //样式类名  自定义样式  
                /\*自带三种皮肤  
                 \*  layui-layer-molv  
                    layui-layer-lan  
                    layui-layer-rim  
                 \*/  
                closeBtn: 1,   // 是否显示关闭按钮  
                anim: 1,//动画类型  
                btn: \['确定','取消'\], //按钮  
                icon: 6,   // icon  
                yes:function()\{  
                    layer.msg('确定成功！');  
                \},  
                btn2:function()\{  
                    layer.msg('取消成功！');  
                \}  
            \});  
        \}  
    </script>  
</html>

[20200614101457879.png]: https://img-blog.csdnimg.cn/20200614101457879.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200614101515992.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE=,size_16,color_FFFFFF,t_70