官方：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. HDU 6150 - Vertex Cover | 2017 中国大学生程序设计竞赛 - 网络选拔赛

    思路来自 ICPCCamp /* HDU 6150 - Vertex Cover [ 构造 ] | 2017 中国大学生程序设计竞赛 - 网络选拔赛 题意: 给了你一个贪心法找最小覆盖的算法,构造一组 ...

  2. 错误/异常：org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFactory' defined in ServletContext resource [/WEB-INF/classes/beans_common.xml]...的解决方法

    1.第一个这种类型的异常 1.1.异常信息:org.springframework.beans.factory.BeanCreationException: Error creating bean w ...

  3. 7.26T3小游戏

    小游戏 题目描述 有一个简单的小游戏.游戏的主人公是一个勇士,他要穿过一片黑森林,去 解救公主.黑森林的地图可以用一张 V 个点.E 条边的无向图来描述,起点是 1 号点,终点是 V 号点.勇士从起点 ...

  4. 内存管理3- @property 参数详解

    @property ----------------- Create two classes: Book & Student ------------------- book.m #impor ...

  5. 2-SAT两题

    看了大白书,学习了一下two-sat,很有意思的算法.题目就是大白书上的两题. 仅仅放一下代码作为以后的模板参考. #include <stdio.h> #include <algo ...

  6. fatal: unable to access 'https://github.com/Homebrew/brew/'

    最近安装 Homebrew 遇到的坑,总结一下. 我的 Mac 版本是 10.13.6. 首先安装 Homebrew /usr/bin/ruby -e "$(curl -fsSL https ...

  7. Mysql 原理以及常见mysql 索引等

    ## 主键 超键 候选键 外键 (mysql数据库常见面试题) 数据库之互联网常用架构方案 数据库之互联网常用分库分表方案 分布式事务一致性解决方案 MySQL Explain详解 ## 数据库事务的 ...

  8. linux提权方法(不断总结更新)

    目录 1.suid提权 2.rbash绕过 3.git提权 4.Linux Kernel 4.4.x (Ubuntu 16.04) - 'double-fdput()' bpf(BPF_PROG_LO ...

  9. 如何使用纯js实现一个带有灰色半透明背景的弹出框

    原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...

  10. 重读APUE(9)-SIG_ERR、SIG_DFL、SIG_IGN定义无参数

    下面这几个函数定义,每次看到都会纠结一阵子,奇怪的是为什么没有参数? #define SIG_ERR (void (*)())-1 #define SIG_DFL (void (*)())0 #def ...