经本人测试，发现没有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", 500, height: 300, cancelDisplay: false, cancel: function(){ this.close(); return false; } }); $("#test5").on("click", function(){ d5.show(); }); </script> </body> </html>
以上demo参考自Github上artDialog的doc。