经本人测试，发现没有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. Alpha 冲刺报告3

    队名 massivehard 组员一(组长:晓辉) 今天完成了哪些任务 .整理昨天的两个功能,补些bug 写了一个初步的loyaut github 还剩哪些任务: 后台的用来处理自然语言的服务器还没架 ...

  2. Scala入门系列（二）：条件控制与循环

    条件控制与循环   if表达式 定义:if表达式是有值的,就是if或者else中最后一行语句返回的值. 例如:val isAdult = if (age > 18) 1 else 0 类型推断: ...

  3. git bash使用（markdown版）

    前言 我是通过这个来学习的.个人愚笨,琢磨了半天,终于搞通了,醉了醉了,以前一直使用svn,用git确实有点水土不服.本文以如何使用git为主来展开,不涉及太多理论. git是分布式的版本管理.什么叫 ...

  4. jmeter 正则表达式提取

    引用名称:自己定义的变量名称,后续请求将要引用到的变量名,如填写的是:id,后面的引用方式是${id} 正则表达式:提取内容的正则表达式,相当于lr中的关联函数 [()     括起来的部分就是需要提 ...

  5. iOS 代码片段的添加!

    说明.代码片段就是方便快捷输入的片段,类似do -while.switch等这些系统语句,这些系统的语句也是代码片段,快速输入一些常用的代码语句,就可以把这些语句写成代码片段! Example: 我们 ...

  6. PGM学习之五 贝叶斯网络

    本文的主题是“贝叶斯网络”(Bayesian Network) 贝叶斯网络是一个典型的图模型,它对感兴趣变量(variables of interest)及变量之间的关系(relationships) ...

  7. MT【144】托兰定理【图论】

    平面上$2n$个点$(n>1,n\in N)$,无三点共线,任意两点连线段,将其中任意$n^2+1$条线段染红色. 求证:三边都为红色的三角形至少有$\left[\dfrac{2}{3}(n+\ ...

  8. 【刷题】BZOJ 1934 [Shoi2007]Vote 善意的投票

    Description 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可 ...

  9. loj2542 「PKUWC2018」随机游走 【树形dp + 状压dp + 数学】

    题目链接 loj2542 题解 设\(f[i][S]\)表示从\(i\)节点出发,走完\(S\)集合中的点的期望步数 记\(de[i]\)为\(i\)的度数,\(E\)为边集,我们很容易写出状态转移方 ...

  10. WEB入门.六 盒子模型

    学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...