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

最新推荐文章于 2024-05-06 00:00:00 发布

叶落无痕123

最新推荐文章于 2024-05-06 00:00:00 发布

阅读量1.1k

点赞数

原文链接：https://blog.csdn.net/weixin_43992507/article/details/84951308?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

版权

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

测试7的效果如下：

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>

叶落无痕123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layer插件的常用提示框，如何使用Layer

需要的插件：skin包下为图片不要忘咯测试7的效果如下：open的方式就大概说一下测试代码没有写测试的时候可以试一下遮罩层效果很好，content可以放路径和指定要打开的标签对象。layer.open({//捕获页 type: 1, btn: ['确定', '取消'], //shade: false, //默认开启遮罩层 ...
复制链接

扫一扫