经本人测试，发现没有layer好用，因为artDialog不能拖拽。不过除了拖拽，其他还蛮简洁的，在自定义上的灵活性也还可以。下面是我自己写的测试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>

    <link rel="stylesheet" href="./js/artDialog/ui-dialog.css">

</head>

<body>

    <input type="button" id="test1" value="对话框" />

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

    <input type="button" id="test3" value="confirm" />

    <input type="button" id="test4" value="close" />

    <input type="button" id="test5" value="drag" />

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

    <script src="./js/artDialog/dialog.js"></script>

    <script type="text/javascript">

        var d1 = dialog({

            title: '欢迎',

            content: '欢迎使用 artDialog 对话框组件！',

            cancelValue: 'OK',

            cancelDisplay: false,

            cancel: function () {

                this.close();

                return false;

            }

        });

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

            //d1.show();

            d1.showModal();

        });

        var d2 = dialog({

            content: 'Hello World!',

            align: 'bottom',

            quickClose: true// 点击空白处快速关闭

        });

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

            d2.show(document.getElementById('test2'));

            setTimeout(function(){

                d2.close();

            }, 2000);

        });

        var d3 = dialog({

            title: '提示',

            content: '按钮回调函数返回 false 则不许关闭',

            okValue: '确定',

            ok: function () {

                this.title('提交中…');

                this.close();

                return false;

            },

            cancelValue: '取消',

            cancel: function () {

                this.close();

                return false;

            }

        });

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

            d3.show();

        });

        var d4 = dialog({

            content: '对话框将在两秒内关闭'

        });

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

            d4.show();

            setTimeout(function(){

                d4.close();

            }, 2000);

        });

        var d5 = dialog({

            content:"anyway...",

            title:"anyway",

            width: 500,

            height: 300,

            cancelDisplay: false,

            cancel: function(){

                this.close();

                return false;

            }

        });

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

            d5.show();

        });

    </script>

</body>

</html>

以上demo参考自Github上artDialog的doc。

Dialog插件artDialog的更多相关文章

  1. 一个好用的Dialog插件

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

  2. 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- ...

  3. dialog插件demo

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

  4. PHPCMS系统使用的弹出窗口插件artDialog

    来源: http://aui.github.io/artDialog/doc/index.html  (官方) http://lab.seaning.com/ http://www.mb5u.com/ ...

  5. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  6. 经典Dialog插件Layer

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

  7. artdialog插件--iframe穿透特性

    使用artdialog可以实现嵌套页面间的通信. 一.引入插件 //artdialog是建立在jquery上面的所以要首先引入jquery <script src="__CLASSTP ...

  8. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  9. js插件---Amaze UI dialog如何使用

    js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...

随机推荐

  1. 初入React（一）

    React:是2013年Facebook在github上的一个开源js库,它将用户界面抽象为一个个组件,再由开发者将其组合成页面.它不是完整的MVC/MVVM框架,专注于提供清晰.简洁的view层解决 ...

  2. Maven解读:强大的依赖体系

    Github地址:https://github.com/zwjlpeng/Maven_Detail Maven最大的好处就是能够很方便的管理项目对第三方Jar包的依赖,只需在Pom文件中添加几行配置文 ...

  3. Beta阶段——第三篇 Scrum 冲刺博客

    i. 提供当天站立式会议照片一张: ii. 每个人的工作 (有work item 的ID) (1) 昨天已完成的工作: 账单与舍费余额数据库关联,删除功能 (2) 今天计划完成的工作: 账单排序显示 ...

  4. Pytest - 进阶功能fixture

    1. 概述 Pytest的fixture功能灵活好用,支持参数设置,便于进行多用例测试,简单便捷,颇有pythonic.如果要深入学习pytest,必学fixture. fixture函数的作用: 完 ...

  5. 2013南京网赛1003 hdu 4750 Count The Pairs

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4750 题意:给出一个无向图,f(a,b)表示从点a到点b的所有路径中的每条路径的最长边中的最小值,给出 ...

  6. poj 1185（状态压缩DP）

    poj  1185(状态压缩DP) 题意:在一个N*M的矩阵中,‘H'表示不能放大炮,’P'表示可以放大炮,大炮能攻击到沿横向左右各两格,沿纵向上下各两格,现在要放尽可能多的大炮使得,大炮之间不能相互 ...

  7. 浅谈JavaScript预编译原理

    这两天又把js的基础重新复习了一下,很多不懂得还是得回归基础,大家都知道js是解释性语言,就是编译一行执行一行,但是在执行的之前,系统会做一些工作: 1,语法分析: 2,预编译: 3,解释执行. 语法 ...

  8. matlab dist函数

    dist——欧式距离加权函数(Euclidean distance weight function) 语法: Z = dist(W,P)    df = dist('deriv')    D = di ...

  9. nginx通过配置empty_gif解决请求favicon 404的问题

    背景介绍 因为一些浏览器在访问网站时会默认去请求网站的favicon,但是我的网站(Tengine)上并没有这些icon图片,因此在访问日志里会出现大量的404错误,会触发一些没必要日志告警.我们可以 ...

  10. JVM学习笔记(一)：Java内存区域

    由于Java程序是交由JVM执行的,所以我们在谈Java内存区域划分的时候事实上是指JVM内存区域划分.在讨论JVM内存区域划分之前,先来看一下Java程序具体执行的过程: 首先Java源代码文件(. ...