官方：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. java 下拉控件 转自 http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-three.html

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  2. SIGAI机器学习第五集 贝叶斯分类器

    讲授贝叶斯公式.朴素贝叶斯分类器.正态贝叶斯分类器的原理.实现以及实际应用 大纲: 贝叶斯公式(直接用贝叶斯公式完成分类,计算一个样本的特征向量X属于每个类c的概率,这个计算是通过贝叶斯公式来完成的. ...

  3. sql 约束汇总

    主要就是增加数据约束的.   Oracle中的约束简单介绍 约束   Including Constraints     在数据库中使用约束(constraints)是为了在该数据库中实施所谓的&qu ...

  4. ES 集中式日志分析平台 Elastic Stack（介绍）

    一.ELK 介绍 ELK 构建在开源基础之上,让您能够安全可靠地获取任何来源.任何格式的数据,并且能够实时地对数据进行搜索.分析和可视化. 最近查看 ELK 官方网站,发现新一代的日志采集器 File ...

  5. ueditor+word粘贴上传！

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  6. 冲刺阶段——Day4

    [今日内容] 完成对登陆成功后输入数据界面的设计,以及对Jswing组件功能的正确使用 布局类代码(布局部分是该类其中的一个部分,下述代码没有构成完整的类) public class NewGold ...

  7. centos7 设置 防火墙 开机自启

    CentOS 7.0默认使用的是firewall作为防火墙,之前版本是使用iptables. 1.设置firewall开机启动 systemctl enable firewalld 2.禁止firew ...

  8. drawable，andrid 圆形图片，圆角图片

          各种drawable 小的例子,   开源中国地址:https://git.oschina.net/lyxs916/drawable-test.git               bitm ...

  9. 用jeecg做个项目第三讲(自定义导入导出)

    1.导入 前端js和跳转页面 <t:dgToolBar title="导入单一模板" icon="icon-put" funname="Impo ...

  10. XML解析思想

    获取文档中的数据: 反序列化[巧记:反读] 把内存中的数据存储到文档中: 序列化[巧记:序写] XML解析思想 DOM: 就是将文档中的数据全部加载到内存,在内存中形成DOM树,然后对数据进行增删改查 ...