官方：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. django 内置标签

    1.autoescape 自动转义开关 官网:https://docs.djangoproject.com/en/2.2/ref/templates/builtins/ 作用:将 html 内容解析成 ...

  2. js中错误处理机制

    1.基本知识 1. 错误对象 Error,SyntaxError,RangeError, ReferenceError,TypeError,URIError 上面的都是构造函数: new 命令可以生成 ...

  3. django -过滤器的使用

    前情提要: 最近工作中用到django 中的  自定制过滤器的内容, 再此 复习一波过滤器和自定制 过滤器的内容 自定制过滤器   1.在settings中的INSTALLED_APPS配置当前app ...

  4. CKEditor本地图片自动上传插件

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  5. redis之哨兵集群

    一.主从复制背景问题 Redis主从复制可将主节点数据同步给从节点,从节点此时有两个作用: 一旦主节点宕机,从节点作为主节点的备份可以随时顶上来. 扩展主节点的读能力,分担主节点读压力. 但是问题是: ...

  6. Liunx之nginx配置

    一.nginx安装 卸载yum安装的ngjnx yum remove nginx -y 编译安装nginx步骤 编译安装nginx的步骤 1.解决软件依赖 yum install gcc patch ...

  7. Ubuntu14.04 dd命令克隆系统镜像安装到另一台机器上

    linux系统如果想做备份还原,使用ghost的时候经常出现问题,后来发现可以直接使用dd命令完成硬盘的克隆和还原.当拷贝完硬盘后,就可以拿这个硬盘放到其它设备上跑了.也就是完成了“烧写”了. 用U盘 ...

  8. c 判断字符是否为字母 （iswalpha example）

    #include <stdio.h> #include <wctype.h> int main () { ; wchar_t str[] = L"C++"; ...

  9. JAVA基础知识|堆和栈

    一.java六个存储数据的地方 1)寄存器(register):这是最快的存储区,因为它位于不同于其他存储区的地方——处理器内部.但是寄存器的数量极其有限,所以寄存器由编译器根据需求进行分配.你不能直 ...

  10. 黑马vue---59-60、组件中的data和methods

    黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...