背景:之前一直用的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>
05-07 15:13