背景：之前一直用的artdialog，但是样式不是很好看，后来偶然看到layer,觉得不错，但是对于.net mvc来说，不能像artdialog一样弹出分部视图是很难受的。所以下面的方法就解决了。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="jquery-1.10.2.js"></script>
<script src="layer/layer.js"></script>
<script>
layer.loading = function (url, opt) {
var cid = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2
$.ajax({
url: url,
success: function (content) {
layer.close(cid);
opt.content = content;
layer.open(opt);
}
});
}
layer.alertP = function (content, options, yes) {
var type = typeof options === ‘function‘;
if (type) yes = options;
return layer.open($.extend({
content: content,
skin: ‘layui-phone-alert‘,
title: ‘‘,
closeBtn: 0,
yes: yes
}, type ? {} : options));
}
layer.confirmP = function (content, options, yes, cancel) {
var type = typeof options === ‘function‘;
if (type) {
cancel = yes;
yes = options;
}
return layer.confirm(content, $.extend({
content: content,
skin: ‘layui-phone-confirm‘,
title: ‘‘,
closeBtn: 0,
yes: yes,
btn2: cancel
}, type ? {} : options));
}
</script>
<script>
//d1跟d6类似，只不过多了个type,但是d6Alert时不会关闭当前弹出层，d1会，所以我一般用d6(记得加padding，因为d6默认没有padding)，以P结尾的表示对手机端弹出的封装
function d1() {
layer.loading("part.html", {
title: ‘异步加载！‘,
maxWidth: 600,
type: 1,
success: function () {
alert(1);
},
btn: [‘确定‘, ‘取消‘],
btn1: function (index, layero) {
//按钮【按钮一】的回调
layer.alert("弹窗内容，告知当前状态、")
},
btn2: function (index, layero) {
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
function d6() {
layer.loading("part.html", {
title: ‘异步加载！‘,
maxWidth: 600,
btn: [‘确定‘, ‘取消‘],
btn1: function (index, layero) {
//按钮【按钮一】的回调
layer.alert("弹窗内容，告知当前状态、")
},
btn2: function (index, layero) {
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
function d4() {
layer.confirm(‘确定要删除吗？‘, { icon: 3 }, function () {
layer.msg(‘删除成功‘, { time: 200000 });
});
}
function d2() {
layer.alert("弹窗内容，告知当前状态、")
}
function d3() {
layer.alertP("layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案。");
}
function d5() {
layer.confirmP(‘确定要删除吗？‘, function () {
layer.msg(‘删除成功‘, { icon: 1 });
});
}
</script>
</head>
<body>
<button type="button" onclick="d2()">普通对话框</button>
<button type="button" onclick="d4()">提示是否</button>
<button type="button" onclick="d3()">手机对话框</button>
<button type="button" onclick="d5()">手机对话框是否</button>
<button type="button" onclick="d1()">异步提示框1</button>
<button type="button" onclick="d6()">异步提示框2</button>
</body>
</html>
时间： 2024-08-03 07:00:28