经本人测试，发现没有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。
时间： 2024-10-07 06:32:38