Github上只有一个test，所以最好还是到官网去学习，官网的示例写的很详尽，难得一见的设计思路和灵活性都极好的插件。下面是我自己test过的demo

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title></title>

    <script src="./js/jquery-1.11.3.min.js"></script>

    <script src="./js/layer/layer.js"></script>

    <style type="text/css">

        .popup1{

            background: #eee;

            padding: 10px;

            font-size: 0.8rem;

        }

        .popup2{

            background: #d12;

            width: 500px;

            height: 200px;

        }

        .cust{

            width:500px;

            height:200px;

            padding:20px;

        }

        .page{

            padding:20px;

        }

    </style>

</head>

<body>

    <div>

        <input type="button" id="alert1" value="默认警告框alert" />

        <input type="button" id="alert2" value="带icon的警告框alert" />

        <input type="button" id="msg1" value="默认提示框msg" />

        <input type="button" id="msg2" value="带icon的提示框msg" />

        <input type="button" id="confirm" value="确认框询问层confirm" />

        <input type="button" id="catch" value="捕获窗口" />

        <input type="button" id="page" value="页面层" />

        <input type="button" id="cust" value="自定义层" />

        <input type="button" id="tips" value="tips层" />

        <input type="button" id="iframe1" value="iframe层" />

    </div>

    <div class="popup1">

        <p>我是条会跳来跳去的狗</p>

    </div>

    <script>

        $("#alert1").on("click", function(){

            layer.alert("这是默认alert的结果");

        });

        $("#alert2").on("click", function(){

            layer.alert("这是带icon的alert的结果",{icon: 1, shift: 4, title: "alert"});

        });

        $("#msg1").on("click", function(){

            layer.msg("这是默认msg的结果");

        });

        $("#msg2").on("click", function(){

            layer.msg("这是带icon的msg的结果",{icon: 1});

        });

        $("#confirm").on("click", function(){

            layer.confirm('你是狗吗？', {btn: ['我是','我不是']}, function(){

                    layer.msg('哈哈哈你是狗', {icon: 1});

                }, function(){

                    layer.msg('你确定你不是狗？', {

                        time: 20000, //20s后自动关闭

                        btn: ['真的不是', '不玩了']

                    });

            });

        });

        $("#catch").on("click", function(){

            layer.open({

                type: 1,

                shade: false,

                title: false, //不显示标题

                content: $('.popup1'), //捕获的元素

                cancel: function(index){

                    layer.close(index);

                    this.content.show();

                    layer.msg('注意看，我又跳回去了', {time: 5000, icon:6});

                }

            });

        });

        $("#page").on("click", function(){

            layer.open({

                type: 1,

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

                area: ['420px', '240px'], //宽高

                content: '<div class="page">你真的是一条狗！！！</div>'

            });

        });

        $("#cust").on("click", function(){

            layer.open({

                type: 1,

                skin: 'popup2', //样式类名

                closeBtn: 0, //不显示关闭按钮

                shift: 2,

                shadeClose: true, //开启遮罩关闭

                content: '<div class="cust">你真的是一条狗！！！</div>'

            });

        });

        $("#tips").on("click", function(){

            layer.tips('Hi，我是tips', '#tips', {time: 1000});

        });

        $("#iframe1").on("click", function(){

            layer.open({

                type: 2,

                title: 'Baidu.com',

                shadeClose: true,

                shade: 0.8,

                area: ['380px', '90%'],

                content: 'http://www.baidu.com' //iframe的url

            });

        });

    </script>

</body>

</html>

官网

http://layer.layui.com/

经典Dialog插件Layer的更多相关文章

  1. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  2. 一个好用的Dialog插件

    网页中常常须要弹出dialog,尽管非常多JS开源框架都提供这个功能,可是效果都不是非常好,比方easy-UI.改动样式这些又不是我擅长的,身边又没有美工兄弟,苦逼啊! (Easy-UI的BasicD ...

  3. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  4. layer插件layer.photos()动态插入的图片无法正常显示

    layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...

  5. jQuery UI dialog插件出错信息:$(this).dialog is not a function

    使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...

  6. dialog插件demo

    基本操作 默认窗体 new Dialog('这是一个默认对话框').show(); 非模态对话框 new Dialog('非模态对话框,可以打开多个!',{modal:false}).show(); ...

  7. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  8. jquery 弹窗插件 layer 常见接口

    源自:https://www.cnblogs.com/teamobaby/p/3556584.html 常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述 ...

  9. 弹窗插件layer

    layer的插件的地址:http://layer.layui.com/简单使用: layer.open({ type: , //page层 area: ['500px', '300px'], titl ...

随机推荐

  1. mysql 性能分析及explain用法

    转载自http://blog.sina.com.cn/s/blog_4586764e0100o9s1.html 使用explain语句去查看分析结果 如   explain select * from ...

  2. Express搭建NodeJS项目

    1.安装Node.js: 2.安装npm; 3.安装Express; 在本例中默认全局安装express 安装express生成器 如果没有安装express-generator或安装路径不对,会报以 ...

  3. 配置高可用集群(实验) corosyne+pacemaker

    环境准备: 一准备三个虚拟机,把/etc/hosts/文件配置好                              192.168.43.9 node0                     ...

  4. Java多线程(三) —— 线程并发库之总体架构

    对java并发库一直觉得很神秘,决定好好研究一下. 参考文献: https://blog.csdn.net/hp910315/article/details/50963095 http://www.b ...

  5. linux下安装java jdk

    第一步:查看java对应版本               yum search java 我自己装的是1.8版本的java包 第二步:装java包 yum install java-1.8.0-ope ...

  6. 字符串（string）与整型（int）、浮点型（float）等之间的转换

    #include <stdlib.h> 1.int/float to string/array: C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串,下 ...

  7. BZOJ5254 FJWC2018红绿灯（线段树）

    注意到一旦在某个路口被红灯逼停,剩下要走的时间是固定的.容易想到预处理出在每个路口被逼停后到达终点的最短时间,这样对于每个询问求出其最早在哪个路口停下就可以了.对于预处理,从下一个要停的路口倒推即可. ...

  8. BZOJ3203 SDOI2013保护出题人（三分）

    给a做一个前缀和,那么现在每次所查询的就是(sn-sk)/(bn+nd-(k+1)d)的最大值.这个式子可以看成是(bn+nd,sn)和((k+1)d,sk)所成直线的斜率. 脑补一条直线不断减小斜率 ...

  9. WampServer3.0允许局域网访问配置教程

    wamp server 下的Apache默认设置是不允许外网访问和局域网访问的,而直接搜索 wamp局域网访问配置,出现都是一些旧版本的wamp的配置信息,最新版本3.0.X需要使用以下配置方法: 配 ...

  10. Timing wheel心跳机制

    在web服务中,断开空闲连接是一种减少资源浪费的一种手段,由此就有了心跳机制来判断一个连接是否空闲. 一种简单粗暴的方式: 1. 服务端每个连接保存一个最后一次操作的时间戳,每次这个连接对应fd可读时 ...