经本人测试，发现没有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. quartusII13.0使用教程

    1.新建工程项目,填写项目存储路径和工程名,不要出现中文路径 2.添加已存在文件(可选),在[File name]下选择已经存在的工程项目,利用[Add]或[Add all]命令添加文件到新工程,点击 ...

  2. Beta阶段DAY3

    一.提供当天站立式会议照片一张 二.每个人的工作 1.讨论项目每个成员的昨天进展 刘阳航:尝试改进UI,美化界面. 林庭亦:调整难度设置. 郑子熙:尝试改进UI,美化界面. 陈文俊:调整难度设置. 2 ...

  3. C++模式学习------适配器模式

    适配器模式: 适配器模式属于结构型的设计模式,是将一个类的接口转换成使用方希望的另外一个接口,这样使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适配器模式有两种: 1.类的适配器:继承不 ...

  4. 概率图模型（PGM）综述-by MIT 林达华博士

    声明:本文转载自http://www.sigvc.org/bbs/thread-728-1-1.html,个人感觉是很好的PGM理论综述,高屋建瓴的总结了PGM的主要分支和发展趋势,特收藏于此. “概 ...

  5. BZOJ3309 DZY Loves Math（莫比乌斯反演+线性筛）

    一通正常的莫比乌斯反演后,我们只需要求出g(n)=Σf(d)*μ(n/d)的前缀和就好了. 考虑怎么求g(n).当然是打表啊.设n=∏piai,n/d=∏pibi .显然若存在bi>1则这个d没 ...

  6. vue项目使用eslint

    转载自 https://www.cnblogs.com/hahazexia/p/6393212.html eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 ...

  7. TreeMap源码剖析

    原文  http://blog.csdn.net/chdjj/article/details/38782221 主题 源码分析红黑树 注:以下源码基于jdk1.7.0_11 之前介绍了一系列Map集合 ...

  8. Make a Crystal UVA - 11014 （容斥定理）

    题意:给定一个NxNxN的正方体,求出最多能选几个整数点,使得任意两点PQ不会使PQO共线. 思路:利用容斥原理,设f(k)为点(x, y, z)三点都为k的倍数的点的个数(要扣掉一个原点O),那么所 ...

  9. BZOJ3155：Preprefix sum——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3155 最朴素的想法是两棵树状数组,一个记录前缀和,一个记录前缀前缀和,但是第二个我们非常不好修改 ...

  10. Mythological VI

    Description 有\(1...n\)一共\(n\)个数.保证\(n\)为偶数. 小M要把这\(n\)个数两两配对, 一共配成\(n/2\)对.每一对的权值是他们两个数的和. 小M想要知道这\( ...