官方：https://www.layui.com/doc/modules/layer.html

源码：https://github.com/xiaostudy/web_sample

效果

目录结构

代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../js/jquery-3.3.1.js"></script>

     <script src="../js/layer/layer.js"></script>

     <script type="text/javascript">

         function msg1() {

             layer.msg("msg弹窗,默认停留3秒");

         }

         function msg2() {

             layer.msg("msg弹窗,停留2秒", {time: 2000});

         }

         function msg3() {

             layer.msg("msg弹窗,不关闭", {time: -1});

         }

         function msg4() {

             layer.msg("msg弹窗,图标", {icon: 6, time: 2000});//1打钩,2打叉,3问号,4锁定,5难过脸,6微笑脸,7-15感叹号,16加载,17以上估计全是感叹号

         }

         function msg5() {

             layer.msg("msg弹窗,起始位置", {offset:['50px', '50px'],time: 2000});//x纵向,y横向

         }

         function msg6() {

             layer.msg("msg弹窗, 更改背景,背景不可点击", {time: 2000, shade : [0.5 , '#000' , true]});

         }

         function msg7() {

             layer.msg("msg弹窗, 回调函数", {time: 2000,},function(){

                 reload();

             });

         }

         function reload() {//回调函数

             layer.msg("回调函数执行！");

         }

         function load1() {

             var index = layer.load();

             layer.close(index);//不加关闭一直处于加载状态

         }

         function load2() {

             var index = layer.load(1);

             layer.close(index);//不加关闭一直处于加载状态

         }

         function load3() {

             layer.load(2,{time: 2*1000});

         }

         function tips1() {

             layer.tips('只想提示地精准些', '#tips1');

         }

         function tips2() {

             layer.tips('在上面', '#tips2', {

                 tips: 1//1在上面，2在右边，3在下面，4在左边

             });

         }

         function open1(){

             var index = layer.open({

                 // time: 2*1000,//2秒后不点击关闭也自动关闭

                 type: 1,//0：信息框，默认 1：页面层 2：iframe层 3：加载层 4：tips层

                 area: ['600px', '360px'],//固定长宽

                 shadeClose: false, //点击遮罩关闭

                 content: '\<\div style="padding:20px;">open弹窗\<\/div>'

                 // content: 'open弹窗'

             });

             // layer.close(index);//不加关闭一直处于等待点击关闭

         }

         function open2(){

             layer.open({

                 title:'test',

                 type: 1,

                 area: ['600px', '360px'],//固定长宽

                 /*https://www.layui.com/doc/modules/layer.html#btn*/

                 btn:['确定', '取消'],//第一个按钮是yes，第二个按钮是btn2，以此类推

                 style:'color:#666;',

                 content: '\<\div style="padding:20px;">跳转到layer.msg\<\/div>',

                 yes: function(index, layero){//第一个按钮

                     location.href='https://www.layui.com/doc/modules/layer.html#layer.msg';

                 },

                 btn2: function (index, layero) {//第二个按钮

                     layer.msg("点击取消关闭");

                     // return false; //开启该代码可禁止点击该按钮关闭

                 },

                 cancel: function(){//右上角关闭回调

                     layer.msg("点击右上角关闭");

                     // return false;//开启该代码可禁止点击该按钮关闭

                 }

             });

         }

     </script>

 </head>

 <body style="text-align: center">

     <h1>layer演示</h1>

     <div>

         <div>

             <h2>提示框msg</h2>

             <a href="https://www.layui.com/doc/modules/layer.html#layer.msg">msg的官方讲解</a>

             <br><br>

             <div>

                 <input type="button" value="msg弹窗,默认停留3秒" onclick="msg1()" />

             </div>

             <div>

                 <input type="button" value="msg弹窗,停留2秒" onclick="msg2()" />

             </div>

             <div>

                 <input type="button" value="msg弹窗,不关闭" onclick="msg3()" />

             </div>

             <div>

                 <input type="button" value="msg弹窗,图标" onclick="msg4()" />

             </div>

             <div>

                 <input type="button" value="msg弹窗,起始位置" onclick="msg5()" />

             </div>

             <div>

                 <input type="button" value="msg弹窗,更改背景后,背景不可点击" onclick="msg6()" />

             </div>

             <div>

                 <input type="button" value="msg弹窗,回调函数" onclick="msg7()" />

             </div>

         </div>

         <hr>

         <div>

             <h2>加载层load</h2>

             <a href="https://www.layui.com/doc/modules/layer.html#layer.load">load的官方讲解</a>

             <br><br>

             <div>

                 <input type="button" value="load弹窗,默认" onclick="load1()" />

             </div>

             <div>

                 <input type="button" value="load弹窗,1" onclick="load2()" />

             </div>

             <div>

                 <input type="button" value="load弹窗,指定等待2秒" onclick="load3()" />

             </div>

         </div>

         <hr>

         <div>

             <h2>tips</h2>

             <a href="https://www.layui.com/doc/modules/layer.html#layer.tips">tips的官方讲解</a>

             <br><br>

             <div>

                 <input type="button" value="tips弹窗,在下面测试旁边" onclick="tips1()" />

             </div>

             <span id="tips1">

                 测试

             </span>

             <div>

                 <input type="button" value="tips弹窗,在上面" onclick="tips2()" />

             </div>

             <span id="tips2">

                 测试

             </span>

         </div>

         <hr>

         <div>

             <h2>open</h2>

             <a href="https://www.layui.com/doc/modules/layer.html#layer.open">open的官方讲解</a>

             <br><br>

             <div>

                 <input type="button" value="open弹窗" onclick="open1()" />

             </div>

             <div>

                 <input type="button" value="open弹窗,2" onclick="open2()" />

             </div>

         </div>

     </div>

 </body>

 </html>

layer简单使用的更多相关文章

  1. iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

    UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...

  2. UIKit中的几个核心对象的介绍:UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

    UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...

  3. IOS Animation-贝塞尔曲线与Layer简单篇（一）

    IOS Animation-贝塞尔曲线与Layer简单篇 swift篇 1.介绍 贝塞尔曲线: 贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一.它通过控制曲线上的四个点( ...

  4. thinkphp 百度编辑器和layer简单用法

    百度编辑器1.4.3.3和layer插件简单案例 :后台单页面管理 增删改查操作 此处为默认图片保存路径,如果要修改保存路径,需要修改config文件. 添加页. <extend name=&q ...

  5. 基于layer简单的弹层封装

    /** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Mat ...

  6. UIApplication,UIWindow,UIViewController,UIView(layer)

    转载自:http://www.cnblogs.com/iCocos/p/4684749.html UIApplication,UIWindow,UIViewController,UIView(laye ...

  7. 烂泥：Postfix邮件服务器搭建之软件安装与配置

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb Postfix邮件服务器的搭建需要使用到几个软件,分别是cyrus-sasl.postf ...

  8. 踏着前人的脚印学hadoop——ipc中的Client

    1.Client有五个内部类,分别是Call,ParallelCall,ParallelResult,Connetion,ConnectionId 其实这五个类就是去完成两件事情的,一件事情是连接,另 ...

  9. C#五层架构

    UI Business Logic Layer Business Rule Layer Data Access Layer Data Definition Layer 简单工厂模式 simple fa ...

随机推荐

  1. 如何预测 Pinterest 和 Instagram 的未来发展潜力？

    作者:陈琪链接:https://www.zhihu.com/question/20169268/answer/14229241来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  2. controller层直接通过server类调用mapper的通用方法

    自己写的方法没有,但是逆向生成的server类会有继承maybatis-plus的框架 与下图的配置有关

  3. Python—“helloworld”

    接触一门计算机新语言,第一件事就是要准备好一个编译器用来打代码. 网上很多环境搭建的方法,具体参照https://www.runoob.com/python/python-install.html 由 ...

  4. react-native 打包apk 更新js和常见问题

    1.打包发布 a.在工程根目录执行如下命令 打包js资源文件 react-native bundle --platform android --dev false --entry-file index ...

  5. MySQL基础之二：主从复制

    # mysql主从复制逻辑: 1.从库执行start slave 开启主从复制. 2.从库请求连接到主库,并且指定binlog文件以及位置后发出请求. 3.主库收到从库请求后,将信息返回给从库,除了信 ...

  6. HDU 1160 FatMouse's Speed ——（DP）

    又是那个lis变形的题目. 但是不好定义严格的比较符号,因此只能n^2去做.值得注意的一个是要先排序,因为可能可以先选后面的再选前面的,先排序的话就能够避免这个问题.但是要注意,因为要输出路径,所以要 ...

  7. Change Assembly Version in a compiled .NET assembly

    Change Assembly Version in a compiled .NET assembly You can use ILMerge: ILMerge.exe Foo.dll /ver:1. ...

  8. H5本地存储详解

    H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...

  9. Gokit微服务-服务链路追踪

    https://mp.weixin.qq.com/s/gjKOy4SDpsjUXDC3Q1YdFw Gokit微服务-服务链路追踪 原创: 兮一昂吧 兮一昂吧 2月28日

  10. 设计一个支持 push，pop，top 操作，并能在常数时间内检索到最小元素的栈 绝对值？相对值

    小结: 1. 常数时间内检索到最小元素 2.存储 存储绝对值?相对值 存储差异 3. java-ide-debug 最小栈 - 力扣(LeetCode)https://leetcode-cn.com/ ...