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. Beta冲刺 (7/7)

    队名:天机组 组员1友林 228(组长) 今日完成:封装代码 明天计划: 剩余任务:优化网络通讯机制 主要困难:暂无 收获及疑问:暂无 组员2方宜 225 今日完成:优化了一部分活动 明天计划:剩余活 ...

  2. Linux上多次restore Tensorflow模型报错

    环境:python3,tensotflow 在恢复了预先训练好的模型进行预测时,第一次是能够成功执行的,但我多次restore模型时,出现了以下问题: 1.ValueError: Variable c ...

  3. angularJS1笔记-(8)-内置指令

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. [cnbeta] 波音系列飞机价格。。。

    https://www.cnbeta.com/articles/tech/786745.htm 单价最便宜的是波音737-700,为0.858亿美元(约合5.96亿元). 评论网友调侃,“你家能满40 ...

  5. From 易水寒 格局越大 人生越宽

    有这么一则故事:三个泥瓦匠在砌墙,一个人走过来,问他们在干什么. 第一个泥瓦匠没好气地说,你没看见吗?我在辛苦地砌墙呢.第二个回答,我们正在建一座高楼.第三个则洋溢着喜悦说,我们正在创造美好生活. 1 ...

  6. [转帖]UsingDiskspdforSQLServer --- 改天做下练习 官方文档.

    Using DiskSpd in SQL Server environments Writer: Robert Beene Contributors: Jose Barreto, Ramu Konid ...

  7. Python高级特性：Python迭代、生成器、列表生成式

    迭代 给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历称为迭代(Iteration). 在java和C语言中,迭代是通过循环list的下标来完成的,Pyth ...

  8. 跳转不同包时候 需要先指定该包的namespace 注意 先跳转 即加上/

  9. BZOJ2876 [Noi2012]骑行川藏 【拉格朗日乘数法】

    题目链接 BZOJ 题解 拉格朗日乘数法 拉格朗日乘数法用以求多元函数在约束下的极值 我们设多元函数\(f(x_1,x_2,x_3,\dots,x_n)\) 以及限制\(g(x_1,x_2,x_3,\ ...

  10. 洛谷 P1072 Hankson 的趣味题 解题报告

    P1072 \(Hankson\)的趣味题 题目大意:已知有\(n\)组\(a0,a1,b0,b1\),求满足\((x,a0)=a1\),\([x,b0]=b1\)的\(x\)的个数. 数据范围:\( ...