基于layer封装的异步加载分部视图弹出层
背景：之前一直用的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>
