Layer弹窗的用法：
<script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->

<script src="layer.js的路径"></script>

Layer的open方法：

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>

        <script src="js/layer/layer.js" type="text/javascript"></script>

    </head>

    <body>

        <style>

            .test{width: 300px; height: 300px; background:#ddd; color: #ff0000; margin:200px auto; text-align: center; font-size: 16px; font-family:Microsoft YaHei;}

            fieldset{border: none; border-top: 1px solid #333;}

        </style>

        <div class="test" style=" color: #ff0000;">

            <fieldset>

                <legend>这是弹窗测试页面</legend>

                <p>这是弹窗测试页面</p>

                <input type="button" value="点击触发弹窗" class="testlayer">

            </fieldset>

        </div>

        <script>

            $(function(){

            layer.config({

                skin: 'layui-layer-lan'

              })

            /*layer.open({

                //skin: 'demo-class'

              });*/

            $(".testlayer").on("click",function(){

                layer.open({

                type: 1,

                title:"测试",

                closeBtn:0, //右上角关闭按钮

                //skin: 'layui-layer-rim', //加上边框

                area: ['450px', '250px'], //宽高

                anim:2,//弹出动画

                btn:['确定购买','取消购买'],//按钮

                content: '<p style=" text-align: center;">html内容</p>',//弹窗内容

                //maxmin:true,//最大最小化按钮

                resize:false,//是否允许拉伸

                yes:function(index,layerdom){

                    layer.close(index);

                    console.log("你点击了确定按钮");

                },

                btn2:function(index,layerdom){

                    console.log("你点击了取消按钮");//输出日志

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

                },

                cancel:function(index,layerdom){

                    console.log("你点击了右上角的关闭按钮");

                }

              });

            });

            })

        </script>

    </body>

</html>

Layer(Web弹窗)的更多相关文章

  1. Layer 一个让你想到即可做到的web弹窗/层 解决方案

    最近工作上面用到的web弹窗组件layer layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. layer官方 ...

  2. 使用layer的弹窗时，出现layer引入成功，触发成功，控制台无报错，但是页面无变化或者仅出现遮罩层的问题的解决思路

    ------------------------------------------20180410补充------------------------------------------------ ...

  3. layer.msg弹窗后没有自动关闭——问题解决

    layer.msg弹窗后没有自动关闭,里面也没有配time: -1 layer.msg("信息体", {time: -1}); 后面发现是jquer和layer版本不对,之前自己用 ...

  4. layer打开弹窗时传递参数(content:)

    在使用layer打开弹窗时,我希望带一些参数过去,进行某些判断.直接就可以用链接+参数的方式即可. js var userGrade=Mrant layer.open({ title: '权限管理', ...

  5. layui里面的layer模块弹窗，强制居中的方法！！！

    每次调用layer弹窗做动态展示的时候,只要内容不固定或者需要二次渲染 比如layui.form.render()进行渲染的时候 由于弹窗已经出来了,只是content部分的结构改变了宽度或者高度,l ...

  6. 一个让你想到即可做到的web弹窗/层----Layer

    Layer     layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是 ...

  7. ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗（PopupTemplate）

    上一篇文章中讲到Popup是一个弹窗,是View对象的默认内置弹窗,并且在View对象构造时就顺便构造了. 那么这个PopupTemplate是什么呢? 后半截单词Template是"模板& ...

  8. layer.js 弹窗组件API文档

      基础参数 type title content skin area offset icon btn closeBtn shade shadeClose time id shift maxmin f ...

  9. layer关闭弹窗

    一.关闭弹出窗 这是layer官网给出的帮助手册,讲解的比较详细 分成两种情况: 1.弹出层不是新的页面的时候,直接获得该弹窗的索引,然后执行close方法 layer.close(); 2.弹出窗是 ...

随机推荐

  1. java-面向对象-封装-this-构造函数

    概要图 一 构造函数 需求:为了描述事物更准确,发现事物对应的很多对象一创建时, 就有了,一些初始化的数据.在类中该如何完成的.   通过Java中的另一个小技术完成:就是构造函数.对象本身就是构造出 ...

  2. hadoop-hive查询ncdc天气数据实例

    使用hive查询ncdc天气数据 在hive中将ncdc天气数据导入,然后执行查询shell,可以让hive自动生成mapredjob,快速去的想要的数据结果. 1. 在hive中创建ncdc表,这个 ...

  3. cf round480D Perfect Groups

    题意:给一个序列,对于每一个连续的区间,区间内的数至少分成几个组,使得每个组内的数任意2个相乘是一个完全平方数(包括0). 输出每个组数的个数. $n \leq 5000 , |a_i| \leq 1 ...

  4. selenium(1)：python3.6.4+selenium3.0+chrome环境配置

    本文为配置过程: python  1.python3.6.4下载安装见python安装说明.(本博客) 2.安装python的集成编译器PyCharm. PyCharm 是由 JetBrains 打造 ...

  5. AndroidStudio离线打包MUI集成JPush极光推送并在java后端管理推送

    1.AndroidStudio离线打包MUI 如何离线打包请参看上篇随笔<AndroidStudio离线打包MUI> 2.集成极光推送 官方文档:https://docs.jiguang. ...

  6. jQuery中的工具和插件

    jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...

  7. 2018-8-15-WPF-插拔触摸设备触摸失效

    title author date CreateTime categories WPF 插拔触摸设备触摸失效 lindexi 2018-08-15 08:12:47 +0800 2018-08-09 ...

  8. 【水滴石穿】react-native-book

    先推荐一个学习的地址:https://ke.qq.com/webcourse/index.html#cid=203313&term_id=100240778&taid=12778558 ...

  9. ThInkPHP加密和解密cookie（登录操作）

    摘自:http://www.thinkphp.cn/code/1794.html 通过加密cookie是网站安全性更高,登录信息不保存在session中在function.php文件在建立两个函数,加 ...

  10. 【机器学习PAI实战】—— 玩转人工智能之利用GAN自动生成二次元头像

    前言 深度学习作为人工智能的重要手段,迎来了爆发,在NLP.CV.物联网.无人机等多个领域都发挥了非常重要的作用.最近几年,各种深度学习算法层出不穷, Generative Adverarial Ne ...