JS仿IOS风格对话框源码范例

最新推荐文章于 2021-05-26 03:19:30 发布

北海居

最新推荐文章于 2021-05-26 03:19:30 发布

阅读量956

点赞数

分类专栏：技术博客文章标签： JS IOS 对话框

本文链接：https://blog.csdn.net/matengfei2000/article/details/49035943

版权

技术博客专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

北海居

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS仿IOS风格对话框源码范例

JS仿IOS风格对话框/*对话框*/.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:#0
复制链接

扫一扫