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. AngularJs 学习 （一）

    最近学习了一下关于AngularJs的知识,发现和Vue还是有非常相似的东西.所以对于学过Vue的自己来说,还是比较好理解的 特点:双向数据绑定,单页面应用 控制器: AngularJs控制器可以控制 ...

  2. 软工网络15团队作业8——Beta阶段项目总结

    1.新成员 姓名 风格 擅长 角色 宣言 李家俊 乱写 都有所涉猎 测试 混就完事了 丁树乐 潇洒 与人沟通 测试 与其临渊羡鱼,不如退而结网 2.是否需要更换团队的PM 不需要 3.下一阶段需要改进 ...

  3. teamcity执行jmeter脚本使用Executable with parameters方式不能正确运行解决思路

    如下图是选择command Line:Executable with parameters设置启动jmeter.bat  命令如下 command Executable: D:\apache-jmet ...

  4. day1 学习历程

    day1 我是一个在校大三学生,一个依然迷茫不知前景的大学混子= =,可以这么说吧 大学混子 真正开始决定好好学习大概在去年的12月份 那时经老师的提醒 开始正式接触软件开发 于是 从头开始学习语言 ...

  5. HDU4641_K-string

    若它的一个子串出现的次数不少于K次,那么这个子串就是一个K-string. 现给出原串,每次可以向该串后面添加一个字符或者询问当前有多少个不同的K-string. 在线添加查询,解法直指SAM. 其实 ...

  6. 数据库事物 jdbc事物 spring事物 隔离级别:脏幻不可重复读

    1.数据库事物: 事物的概念 a给b打100块钱的例子 2.jdbc事物: 通过下面代码实现 private Connection conn = null; private PreparedState ...

  7. [Codeforces526F]Pudding Monsters 分治

    F. Pudding Monsters time limit per test 2 seconds memory limit per test 256 megabytes In this proble ...

  8. 【刷题】BZOJ 3514 Codechef MARCH14 GERALD07加强版

    Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. Input 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密. 接下来 ...

  9. 洛谷 P1878 舞蹈课 解题报告

    P1878 舞蹈课 题目描述 有\(n\)个人参加一个舞蹈课.每个人的舞蹈技术由整数来决定.在舞蹈课的开始,他们从左到右站成一排.当这一排中至少有一对相邻的异性时,舞蹈技术相差最小的那一对会出列并开始 ...

  10. digitalworld.local: MERCY靶机入侵

    0x01 前言 MERCY是一个致力于PWK课程安全的靶机系统.MERCY是一款游戏名称,与易受攻击的靶机名称无关.本次实验是攻击目标靶机获取root权限并读系统目录中的proof.txt信息 靶机的 ...