要
自定义 HTML 样式的
弹窗，可以使用
JavaScript 和 CSS 来实现。以下是一个简单的
自定义 alert 弹窗的示例：
HTML 代码：
```
<div id="custom-
alert">
<div id="custom-
alert-box">
<div id="custom-
alert-message"></div>
<button id="custom-
alert-okay">OK</button>
</div>
</div>
```
CSS 代码：
```
#custom-
alert {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#custom-
alert-box {
width: 300px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 10px;
text-align: center;
padding: 20px;
}
#custom-
alert-message {
font-size: 18px;
margin-bottom: 20px;
}
#custom-
alert-okay {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
#custom-
alert-okay:hover {
background-color: #0069d9;
}
```
JavaScript 代码：
```
function custom
Alert(message, callback) {
document.getElementById('custom-
alert-message').innerHTML = message;
document.getElementById('custom-
alert').style.display = 'block';
document.getElementById('custom-
alert-okay').onclick = function() {
document.getElementById('custom-
alert').style.display = 'none';
if (callback) {
callback();
}
};
}
```
在需要弹出提示框的地方，调用 custom
Alert 函数即可：
```
custom
Alert('Hello, world!', function() {
console.log('
Alert closed.');
});
```
同样，可以使用类似的方法
自定义 confirm
弹窗。
扫一扫
3216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
