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. css布局 弹性布局 和 网格布局

    这里就不写这两种布局的内容了 弹性布局链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网格布局链接:https://www.ji ...

  2. 转 理解vuex -- vue的状态管理模式

    转自:https://segmentfault.com/a/1190000012015742 vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ...

  3. Alpha阶段敏捷冲刺③

    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 界面雏形设计 数据库初步设计 完成后端框架初步构建 今天计划完成的工 ...

  4. beta阶段博客合集

    第一次博客 第二次博客 第三次博客 第四次博客 第五次博客

  5. 第八周PSP&进度条

    团队项目PSP 一.表格:     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论各个模块页面设计 9:30 12:30 站立会议 分配 ...

  6. 实测 | 转型微服务，这4大工具谁是API网关性能最优？

    转自:http://www.servicemesh.cn/?/article/45 作者:Turgay Çelik 翻译:钟毅(Drew Zhong) 原文:Comparing API Gateway ...

  7. vue 笔记1

    created 钩子可以用来在一个实例被创建之后执行代码: new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 co ...

  8. HDU1565_方格取数(1)

    给一个数字方阵,你要从中间取出一些数字,保证相邻的两个数字不同时被取出来,求取出来的最大的和是多少? 建立图模型,对于行列的和为奇数的格子,建立一条从原点到达这个点的边,对于行列和为偶数的格子,建立一 ...

  9. ansible操作(一)

    ansible晋级操作之ad-hoc命令 所谓的ad-hoc命令! 如果我们敲入一些命令去比较快的完成一些事情,而不需要将这些执行的命令特别保存下来, 这样的命令就叫做 ad-hoc 命令.Ansib ...

  10. requestAnimationFrame 优雅降级

    if (!Date.now) Date.now = function() { return new Date().getTime(); }; (function() { 'use strict'; v ...