经本人测试，发现没有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. eg_5

    问题描述:输入两个字符串,从第一字符串中删除第二个字符串中所有的字符. 例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.” ...

  2. C++ socket网络爬虫（1）

    C++写的socket网络爬虫,代码会在最后一次讲解中提供给大家,同时我也会在写的同时不断的对代码进行完善与修改 我首先向大家讲解如何将网页中的内容,文本,图片等下载到电脑中. 我会教大家如何将百度首 ...

  3. Beta版本发布140字评论

    1.飞天小女警组: 礼物挑选工具:系统界面十分新颖,相比于前阶段,增加了账号登陆的功能,并且还根据不同的价位区间添加了礼物的图片,并根据礼物的受欢迎程度添加了top10的功能,并且增加了关于本网站的问 ...

  4. cxVerticalGrid

    cxVerticalGrid can't get values procedure TForm1.Button1Click(Sender: TObject); var i: Integer; lvNa ...

  5. nginx负载均衡和tomcat热部署简单了解

    简单说下几个名词 nginx     它是一个反向代理,实际上就是一台负责转发的代理服务器,貌似充当了真正服务器的功能,但实际上并不是,代理服务器只是充当了转发的作用,并且从真正的服务器那里取得返回的 ...

  6. [转帖]AMD、英特尔为何争相走向胶水多核处理器？真相在此

    AMD.英特尔为何争相走向胶水多核处理器?真相在此 胶水多核到底好不好?这个事不是简单一句话能说明的,今天的超能课堂里我们就来聊聊MCM胶水多核技术的过去及未来. 作者:孟宪瑞来源:超能网|2018- ...

  7. vue 引入组件

    <comA></comA>此时可用在模板里 //a为vue文件,里面定义了模板import comA from './components/a' export default ...

  8. BAT等公司必问的8道Java经典面试题，你都会了吗？

    工作多年以及在面试中,我经常能体会到,有些面试者确实是认真努力工作,但坦白说表现出的能力水平却不足以通过面试,通常是两方面原因: 1.“知其然不知其所以然”.做了多年技术,开发了很多业务应用,但似乎并 ...

  9. MySQL复合主键下ON DUPLICATE KEY UPDATE语句失效问题

    问题的起因,假设有一张表,里面保存了交易订单,每张订单有唯一的ID,有最后更新时间,还有数据,详情如下: 1 2 3 4 5 6 7 +-------+----------+------+-----+ ...

  10. UVA10054_The Necklace

    很简单,求欧拉回路.并且输出. 只重点说一下要用栈来控制输出. 为啥,如图: 如果不用栈,那么1->2->3->1就回来了,接着又输出4->5,发现这根本连接不上去,所以如果用 ...