提示一：
提示二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 唤起弹框元素 -->
<button id="open-toast">唤起提示框元素</button>
<!-- 提示元素选择自己需要的种类，删除掉另一个即可 -->
<!-- 提示元素：标题+提示内容+关闭按钮 -->
<div class="toast"
style="display: none;width: 300px;border: 1px solid white;padding: 5px 15px;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 0px 0px 10px #d3d3d3;border-radius: 5px;">
<h3 class="toast-title" style="text-align: left;margin: 0;padding: 0;">标题</h3>
<div class="toast-content">白底黑字内容</div>
<div style="display: flex;justify-content: flex-end;">
<button class="toast-close"
style="background-color:#3c91f7;padding: 5px 30px;border: none;border-radius: 3px;color: white;">知道了</button>
</div>
</div>
<!-- 提示元素：只需要提示内容 -->
<span class="toast"
style="display: none;background-color: #7f7f7f;border-radius: 5px;padding: 8px 40px;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);border: none;opacity: 0.9;color: #dadada;text-align: center;">
黑底白字内容</span>
<script>
document.querySelector('#open-toast').onclick = function () {
document.querySelector('.toast').style.display = ''
// // 2 s后自动关闭 自动关闭和手动点击关闭二选一
setTimeout(() => {
document.querySelector('.toast').style.display = 'none'
}, 2000);
}
// 手动点击"我知道了"关闭 自动关闭和手动点击关闭二选一
document.querySelector('.toast-close').onclick = function () {
document.querySelector('.toast').style.display = 'none'
}
</script>
</body>
</html>
