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

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

效果

目录结构

代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="../js/jquery-3.3.1.js"></script>
  7.      <script src="../js/layer/layer.js"></script>
  8.  
  9.      <script type="text/javascript">
  10.          function msg1() {
  11.              layer.msg("msg弹窗,默认停留3秒");
  12.          }
  13.  
  14.          function msg2() {
  15.              layer.msg("msg弹窗,停留2秒", {time: 2000});
  16.          }
  17.  
  18.          function msg3() {
  19.              layer.msg("msg弹窗,不关闭", {time: -1});
  20.          }
  21.  
  22.          function msg4() {
  23.              layer.msg("msg弹窗,图标", {icon: 6, time: 2000});//1打钩,2打叉,3问号,4锁定,5难过脸,6微笑脸,7-15感叹号,16加载,17以上估计全是感叹号
  24.          }
  25.  
  26.          function msg5() {
  27.              layer.msg("msg弹窗,起始位置", {offset:['50px', '50px'],time: 2000});//x纵向,y横向
  28.          }
  29.  
  30.          function msg6() {
  31.              layer.msg("msg弹窗, 更改背景,背景不可点击", {time: 2000, shade : [0.5 , '#000' , true]});
  32.          }
  33.  
  34.          function msg7() {
  35.              layer.msg("msg弹窗, 回调函数", {time: 2000,},function(){
  36.                  reload();
  37.              });
  38.          }
  39.  
  40.          function reload() {//回调函数
  41.              layer.msg("回调函数执行！");
  42.          }
  43.  
  44.          function load1() {
  45.              var index = layer.load();
  46.              layer.close(index);//不加关闭一直处于加载状态
  47.          }
  48.  
  49.          function load2() {
  50.              var index = layer.load(1);
  51.              layer.close(index);//不加关闭一直处于加载状态
  52.          }
  53.  
  54.          function load3() {
  55.              layer.load(2,{time: 2*1000});
  56.          }
  57.  
  58.          function tips1() {
  59.              layer.tips('只想提示地精准些', '#tips1');
  60.          }
  61.  
  62.          function tips2() {
  63.              layer.tips('在上面', '#tips2', {
  64.                  tips: 1//1在上面，2在右边，3在下面，4在左边
  65.              });
  66.          }
  67.  
  68.          function open1(){
  69.              var index = layer.open({
  70.                  // time: 2*1000,//2秒后不点击关闭也自动关闭
  71.                  type: 1,//0：信息框，默认 1：页面层 2：iframe层 3：加载层 4：tips层
  72.                  area: ['600px', '360px'],//固定长宽
  73.                  shadeClose: false, //点击遮罩关闭
  74.                  content: '\<\div style="padding:20px;">open弹窗\<\/div>'
  75.                  // content: 'open弹窗'
  76.              });
  77.              // layer.close(index);//不加关闭一直处于等待点击关闭
  78.          }
  79.  
  80.          function open2(){
  81.              layer.open({
  82.                  title:'test',
  83.                  type: 1,
  84.                  area: ['600px', '360px'],//固定长宽
  85.                  /*https://www.layui.com/doc/modules/layer.html#btn*/
  86.                  btn:['确定', '取消'],//第一个按钮是yes，第二个按钮是btn2，以此类推
  87.                  style:'color:#666;',
  88.                  content: '\<\div style="padding:20px;">跳转到layer.msg\<\/div>',
  89.                  yes: function(index, layero){//第一个按钮
  90.                      location.href='https://www.layui.com/doc/modules/layer.html#layer.msg';
  91.                  },
  92.                  btn2: function (index, layero) {//第二个按钮
  93.                      layer.msg("点击取消关闭");
  94.                      // return false; //开启该代码可禁止点击该按钮关闭
  95.                  },
  96.                  cancel: function(){//右上角关闭回调
  97.                      layer.msg("点击右上角关闭");
  98.                      // return false;//开启该代码可禁止点击该按钮关闭
  99.                  }
  100.              });
  101.          }
  102.      </script>
  103.  </head>
  104.  <body style="text-align: center">
  105.      <h1>layer演示</h1>
  106.      <div>
  107.          <div>
  108.              <h2>提示框msg</h2>
  109.              <a href="https://www.layui.com/doc/modules/layer.html#layer.msg">msg的官方讲解</a>
  110.              <br><br>
  111.              <div>
  112.                  <input type="button" value="msg弹窗,默认停留3秒" onclick="msg1()" />
  113.              </div>
  114.              <div>
  115.                  <input type="button" value="msg弹窗,停留2秒" onclick="msg2()" />
  116.              </div>
  117.              <div>
  118.                  <input type="button" value="msg弹窗,不关闭" onclick="msg3()" />
  119.              </div>
  120.              <div>
  121.                  <input type="button" value="msg弹窗,图标" onclick="msg4()" />
  122.              </div>
  123.              <div>
  124.                  <input type="button" value="msg弹窗,起始位置" onclick="msg5()" />
  125.              </div>
  126.              <div>
  127.                  <input type="button" value="msg弹窗,更改背景后,背景不可点击" onclick="msg6()" />
  128.              </div>
  129.              <div>
  130.                  <input type="button" value="msg弹窗,回调函数" onclick="msg7()" />
  131.              </div>
  132.          </div>
  133.          <hr>
  134.          <div>
  135.              <h2>加载层load</h2>
  136.              <a href="https://www.layui.com/doc/modules/layer.html#layer.load">load的官方讲解</a>
  137.              <br><br>
  138.              <div>
  139.                  <input type="button" value="load弹窗,默认" onclick="load1()" />
  140.              </div>
  141.              <div>
  142.                  <input type="button" value="load弹窗,1" onclick="load2()" />
  143.              </div>
  144.              <div>
  145.                  <input type="button" value="load弹窗,指定等待2秒" onclick="load3()" />
  146.              </div>
  147.          </div>
  148.          <hr>
  149.          <div>
  150.              <h2>tips</h2>
  151.              <a href="https://www.layui.com/doc/modules/layer.html#layer.tips">tips的官方讲解</a>
  152.              <br><br>
  153.              <div>
  154.                  <input type="button" value="tips弹窗,在下面测试旁边" onclick="tips1()" />
  155.              </div>
  156.              <span id="tips1">
  157.                  测试
  158.              </span>
  159.              <div>
  160.                  <input type="button" value="tips弹窗,在上面" onclick="tips2()" />
  161.              </div>
  162.              <span id="tips2">
  163.                  测试
  164.              </span>
  165.          </div>
  166.          <hr>
  167.          <div>
  168.              <h2>open</h2>
  169.              <a href="https://www.layui.com/doc/modules/layer.html#layer.open">open的官方讲解</a>
  170.              <br><br>
  171.              <div>
  172.                  <input type="button" value="open弹窗" onclick="open1()" />
  173.              </div>
  174.              <div>
  175.                  <input type="button" value="open弹窗,2" onclick="open2()" />
  176.              </div>
  177.          </div>
  178.      </div>
  179.  
  180.  </body>
  181.  </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. 2、python--第二天练习题

    #1.有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中. #即: {'k ...

  2. focus([[data],fn]) 当元素获得焦点时，触发 focus 事件。

    focus([[data],fn]) 概述 当元素获得焦点时,触发 focus 事件.直线电机选型 可以通过鼠标点击或者键盘上的TAB导航触发.这将触发所有绑定的focus函数,注意,某些对象不支持f ...

  3. 2018 Nowcoder Multi-University Training Contest 2

    目录 Contest Info Solutions A. run D. monrey G. transform H. travel I. car J. farm Contest Info Practi ...

  4. 「CQOI2006」简单题 线段树

    「CQOI2006」简单题 线段树 水.区间修改,单点查询.用线段树维护区间\([L,R]\)内的所有\(1\)的个数,懒标记表示为当前区间是否需要反转(相对于区间当前状态),下方标记时懒标记取反即可 ...

  5. 「ARC103D」Robot Arms「构造」

    题意 给定\(n\)个点,你需要找到一个合适的\(m\)和\(d_1,d_2,...,d_m\),使得从原点出发每次向四个方向的某一个走\(d_i\)个单位,最终到达\((x_t, y_t)\).输出 ...

  6. 带下划线的 HTTP Header无法获取到可能是因为nginx

    背景:新版本修改了个功能是在老版本的基础上做的,同一个接口,需要兼容老版本,因此让前台在header中封装了 version版本号,client_type 客户端类型,根据这两个字段判断接口要走的逻辑 ...

  7. Js 之将html转为图片html2canvas

    一.效果图 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. mybatis+mysql批量插入和批量更新、存在及更新

    mybatis+mysql批量插入和批量更新 一.批量插入 批量插入数据使用的sql语句是: insert into table (字段一,字段二,字段三) values(xx,xx,xx),(oo, ...

  9. Python 今天抽空学习了@Property

    1.@Property有啥用 1) @property使方法像属性一样调用 @property可以把一个实例方法变成其同名属性,以支持.号访问,它亦可标记设置限制,加以规范 2) @property成 ...

  10. [转]Html 页面常用单词

    Html 页面常用单词 本文来自:https://gitee.com/opencc/SchoolAppDemo 第2批: JavaScript ready 准备 function 函数 disappe ...