Html自定义alert,confirm弹窗
时间: 2023-07-29 15:07:44 浏览: 499
要自定义 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 customAlert(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();
}
};
}
```
在需要弹出提示框的地方,调用 customAlert 函数即可:
```
customAlert('Hello, world!', function() {
console.log('Alert closed.');
});
```
同样,可以使用类似的方法自定义 confirm 弹窗。