经本人测试，发现没有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. p4factory下 targets/basic_rout

    p4factory/targets/basic_routing/p4src代码解读 headers.p4 header_type ethernet_t { fields { dstAddr : 48; ...

  2. C++编译与链接（0）-.h与.cpp中的定义与声明

    C++中有的东西需要放在可以在.h文件中定义,有的东西则必须放在.cpp文件中定义,有的东西在不同的cpp文件中的名字可以一样,而有的则不能一样 那么究竟哪些东西可在头文件中定义,声明,哪些东西又必须 ...

  3. 配置docker的私有仓库

    1:安装docker-registry包 yum install -y docker-distribution   2:启动docker-distribution,默认监听于TCP/5000端口 sy ...

  4. Oracle中SYS_CONNECT_BY_PATH函数的妙用 ;

    Oracle 中SYS_CONNECT_BY_PATH函数是非常重要的函数,下面就为您介绍一个使用SYS_CONNECT_BY_PATH函数的例子,实例如下: 数据准备: ),b )); ', 'A' ...

  5. 微信小程序组件 日历

    js文件 'use strict'; let choose_year = null,   choose_month = null; const conf = {   data: {     hasEm ...

  6. C#全局钩子和局部钩子记录

    源自:https://blog.csdn.net/programvae/article/details/80292076 最近碰巧要使用键盘钩子,于是在网上搜索了一番,发现大多数博客的文章都是雷同的, ...

  7. 用JavaScript添加选择按钮的背景颜色和juqery添加选择按钮的背景色

    在项目开发中经常遇到要选择的按钮,选择完之后被选择的按钮的背景色会发生变化,表示被选择 样式图如下: 每点击一个数字,相应的背景色变为蓝色,其他的依旧是白色,先用JavaScript实现 html代码 ...

  8. The Best Path HDU - 5883（欧拉回路 && 欧拉路径）

    The Best Path Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  9. 学习Spring Boot：（二）启动原理

    前言 主要了解前面的程序入口 @@SpringBootApplication 这个注解的结构. 正文 参考<SpringBoot揭秘 快速构建微服务体系>第三章的学习,总结下. Sprin ...

  10. BZOJ 1013 | 一份写了一堆注释的高斯消元题解

    题意 给出\(n\)维直角坐标系中\(n + 1\)个点的坐标,它们都在一个\(n\)维球面上,求球心坐标. 题解 设球面上某两个点坐标为\((a_1, a_2, ... a_n)\)和\((b_1, ...