背景：之前一直用的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>