标签：
alert("这个是一个alert弹窗");
alert({
content: "自定义alert弹窗",
btnText: "OK",
boxClass: "custom-alert"
}, function () {
console.log("good！");
});
confirm("这个是一个confirm弹窗", function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
confirm({
content: "自定义参数confirm弹窗",
okText: "OK",
cancelText: "cancen",
boxClass: "custom-confirm"
}, function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS仿IOS风格对话框</title> <style> /*对话框*/ .dialog {width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;} .dialog-overlay {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:#000;opacity:.7;filter:alpha(opacity:70);} .dialog-box {width:80%;position:absolute;top:50%;left:50%;margin:-80px 0 0 -40%;z-index:2;background-color:#fff;border-radius:5px;text-align:center;} .dialog-detail {padding:30px 20px;font-size:20px;line-height:1.5;} .dialog-opera {width:100%;border-top:1px solid #ddd;} .dialog-btn {height:50px;border:none;background:none;color:#157efb;font-size:18px;line-height:50px;cursor:pointer;} .dialog-btn-close {width:100%;} .dialog-btn-cancel, .dialog-btn-ok {width:50%;float:left;} .dialog-btn-ok {border-left:1px solid #ddd;box-sizing:border-box;} </style> </head> <body> <p><button id="bn-alert">Alert</button></p> <pre> alert("这个是一个alert弹窗"); </pre> <p> </p> <p><button id="bn-alert2">Alert 自定义参数</button></p> <pre> alert({ content: "自定义alert弹窗", btnText: "OK", boxClass: "custom-alert" }, function () { console.log("good！"); }); </pre> <p> </p> <p><button id="bn-confirm">Confirm</button></p> <pre> confirm("这个是一个confirm弹窗", function (flag) { if (flag) { alert("你点了确定"); } else { alert("你点了取消"); } }); </pre> <p> </p> <p><button id="bn-confirm2">Confirm 自定义参数</button></p> <pre> confirm({ content: "自定义参数confirm弹窗", okText: "OK", cancelText: "cancen", boxClass: "custom-confirm" }, function (flag) { if (flag) { alert("你点了确定"); } else { alert("你点了取消"); } }); </pre> <script> /* * 对话框插件 * 赵欢磊 20150915 */ var dialog = { //对话框 alert: function (elem, callback) { var content = elem.content || elem || "", btnText = elem.btnText || "确定", boxClass = elem.boxClass || "", alertHtml = ‘\ <div class="dialog ‘+ boxClass +‘"> <div class="dialog-box"> <div class="dialog-detail">‘ + content + ‘</div> <div class="dialog-opera"> <button class="dialog-btn dialog-btn-close">‘ + btnText + ‘</button> </div> </div> <div class="dialog-overlay"></div> </div>‘; document.body.insertAdjacentHTML("beforeend", alertHtml); var dialog = document.querySelector(".dialog"), btnClose = dialog.querySelector(".dialog-btn-close"); btnClose.onclick = function () { dialog.remove(); if (callback) { callback(); } }; }, confirm: function (elem, callback) { var content = elem.content || elem || "", okText = elem.okText || "确定", cancelText = elem.cancelText || "取消", boxClass = elem.boxClass || "", confirmHtml = ‘\ <div class="dialog ‘+ boxClass +‘"> <div class="dialog-box"> <div class="dialog-detail">‘ + content + ‘</div> <div class="dialog-opera"> <button class="dialog-btn dialog-btn-cancel">‘ + cancelText + ‘</button> <button class="dialog-btn dialog-btn-ok">‘ + okText + ‘</button> </div> </div> <div class="dialog-overlay"></div> </div>‘; document.body.insertAdjacentHTML("beforeend", confirmHtml); var dialog = document.querySelector(".dialog"), btnOk = dialog.querySelector(".dialog-btn-ok"), btnCancel = dialog.querySelector(".dialog-btn-cancel"), flag = true, result = function () { dialog.remove(); if (callback) { callback(flag); } }; btnOk.onclick = function () { flag = true; result(); }; btnCancel.onclick = function () { flag = false; result(); }; } }; //替换系统默认对话框 window.alert = dialog.alert; window.confirm = dialog.confirm; </script> <script> document.getElementById("bn-alert").onclick = function () { alert("这个是一个alert弹窗"); }; document.getElementById("bn-alert2").onclick = function () { alert({ content: "自定义alert弹窗", btnText: "OK", boxClass: "custom-alert" }, function () { console.log("good！"); }); }; document.getElementById("bn-confirm").onclick = function () { confirm("这个是一个confirm弹窗", function (flag) { if (flag) { alert("你点了确定"); } else { alert("你点了取消"); } }); }; document.getElementById("bn-confirm2").onclick = function () { confirm({ content: "<h2>自定义参数confirm弹窗</h2>", okText: "OK", cancelText: "cancen", boxClass: "custom-confirm" }, function (flag) { if (flag) { alert("你点了确定"); } else { alert("你点了取消"); } }); }; </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/huanlei/p/4810091.html
