`window.
confirm`
弹窗的样式是由浏览器决定的，不同浏览器可能有不同的样式。如果你想定制
弹窗的样式，可以使用其他的
弹窗库或者自己使用 HTML、CSS 和 JavaScript 实现一个
弹窗。以下是一个简单的自定义
弹窗的示例：
HTML 代码：
```
<div id="my-
confirm" class="
confirm">
<div class="
confirm-message"></div>
<div class="
confirm-buttons">
<button id="
confirm-ok">确定</button>
<button id="
confirm-cancel">取消</button>
</div>
</div>
```
CSS 代码：
```
.
confirm {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
padding: 10px;
width: 300px;
}
.
confirm-message {
font-size: 16px;
margin-bottom: 10px;
}
.
confirm-buttons {
text-align: right;
}
.
confirm-buttons button {
margin-left: 10px;
}
```
JavaScript 代码：
```
function my
Confirm(message, okCallback, cancelCallback) {
var
confirmBox = document.getElementById("my-
confirm");
var messageBox =
confirmBox.querySelector(".
confirm-message");
var okButton =
confirmBox.querySelector("#
confirm-ok");
var cancelButton =
confirmBox.querySelector("#
confirm-cancel");
messageBox.innerHTML = message;
confirmBox.style.display = "block";
okButton.onclick = function() {
confirmBox.style.display = "none";
okCallback();
};
cancelButton.onclick = function() {
confirmBox.style.display = "none";
cancelCallback();
};
}
// 示例用法
my
Confirm("确定要删除吗？", function() {
console.log("点击了确定按钮");
}, function() {
console.log("点击了取消按钮");
});
```
这个示例中，使用了一个 `<div>` 元素作为
弹窗的容器，使用了 CSS 来设置
弹窗的样式。JavaScript 中定义了一个 `my
Confirm` 函数，该函数接受三个参数：
弹窗的消息、点击确定按钮后的回调函数、点击取消按钮后的回调函数。在函数中，首先获取
弹窗容器和相关元素，然后设置
弹窗的消息，显示
弹窗，并为确定和取消按钮分别绑定点击事件处理函数。点击确定按钮时，隐藏
弹窗并调用确定按钮回调函数；点击取消按钮时，仅隐藏
弹窗。最后，使用示例调用了 `my
Confirm` 函数。
博客探讨了layer.confirm弹窗在页面中的垂直居中问题，提到了常见的复制粘贴解决方案可能不适用于嵌套层级页面。文章提供了一种计算页面坐标的策略，通过获取页面长度并减去屏幕长度的一半来实现弹窗的垂直居中，并指出方法的适用性可能需要根据具体情况调整。
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
