Bootstrap5 消息弹窗(Toasts)
Bootstrap5 弹窗 (Toasts) 是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。
弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。
弹窗可以在页面的不同位置显示，包括左上角、右上角、左下角、右下角以及页面底部中央。
如何创建弹窗
要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。
注意：弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在
实例
div class=“toast show“>
div class=“toast-header“>
弹窗标题
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“>button>
div>
div class=“toast-body“>
这是一个Bootstrap 5弹窗示例。
div>
div>
div class=“toast-header“>
弹窗标题
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“>button>
div>
div class=“toast-body“>
这是一个Bootstrap 5弹窗示例。
div>
div>
要通过点击按钮显示弹窗，您需要使用 JavaScript 对其进行初始化：通过 ID 获取指定元素的点击事件并调用 toast() 方法。
当点击按钮时，以下代码将显示页面中的所有 toast 类：
实例
document.getElementById(“toastbtn“).onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll(‘.toast‘))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
var toastElList = [].slice.call(document.querySelectorAll(‘.toast‘))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
将弹窗显示在右下角：
实例
div class=“container mt-5“>
button class=“btn btn-primary“ onclick=“showToast()“>显示弹窗button>
div> div class=“position-fixed bottom-0 end-0 p-3“>
div id=“toast“ class=“toast“ role=“alert“ aria-live=“assertive“ aria-atomic=“true“>
div class=“toast-header“>
strong class=“me-auto“>Bootstrap Toaststrong>
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“ aria-label=“Close“>button>
div>
div class=“toast-body“>
这是一个Bootstrap 5弹窗示例。
div>
div>
div>
button class=“btn btn-primary“ onclick=“showToast()“>显示弹窗button>
div> div class=“position-fixed bottom-0 end-0 p-3“>
div id=“toast“ class=“toast“ role=“alert“ aria-live=“assertive“ aria-atomic=“true“>
div class=“toast-header“>
strong class=“me-auto“>Bootstrap Toaststrong>
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“ aria-label=“Close“>button>
div>
div class=“toast-body“>
这是一个Bootstrap 5弹窗示例。
div>
div>
div>
设置多个消息弹窗：
实例
div aria-live=“polite“ aria-atomic=“true“ class=“position-relative“>
div class=“toast-container top-0 end-0 p-3“>
div class=“toast fade show“ role=“alert“ aria-live=“assertive“ aria-atomic=“true“>
div class=“toast-header“>
svg class=“bd-placeholder-img rounded me-2“ width=“20“ height=“20“ xmlns=“http://www.w3.org/2000/svg“ aria-hidden=“true“ preserveAspectRatio=“xMidYMid slice“ focusable=“false“>rect width=“100%“ height=“100%“ fill=“#007aff“>rect>svg>
strong class=“me-auto“>弹窗实例strong>
small class=“text-muted“>刚刚small>
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“ aria-label=“Close“>button>
div>
div class=“toast-body“>
这是第二个消息
div>
div>
div class=“toast-header“>
svg class=“bd-placeholder-img rounded me-2“ width=“20“ height=“20“ xmlns=“http://www.w3.org/2000/svg“ aria-hidden=“true“ preserveAspectRatio=“xMidYMid slice“ focusable=“false“>rect width=“100%“ height=“100%“ fill=“#007aff“>rect>svg>
strong class=“me-auto“>弹窗实例strong>
small class=“text-muted“>2 秒前small>
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“ aria-label=“Close“>button>
div>
div class=“toast-body“>
这是第一个消息
div>
div>
div>
div>
div class=“toast-container top-0 end-0 p-3“>
div class=“toast fade show“ role=“alert“ aria-live=“assertive“ aria-atomic=“true“>
div class=“toast-header“>
svg class=“bd-placeholder-img rounded me-2“ width=“20“ height=“20“ xmlns=“http://www.w3.org/2000/svg“ aria-hidden=“true“ preserveAspectRatio=“xMidYMid slice“ focusable=“false“>rect width=“100%“ height=“100%“ fill=“#007aff“>rect>svg>
strong class=“me-auto“>弹窗实例strong>
small class=“text-muted“>刚刚small>
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“ aria-label=“Close“>button>
div>
div class=“toast-body“>
这是第二个消息
div>
div>
div class=“toast fade show“ role=“alert“ aria-live=“assertive“ aria-atomic=“true“>
div class=“toast-header“>
svg class=“bd-placeholder-img rounded me-2“ width=“20“ height=“20“ xmlns=“http://www.w3.org/2000/svg“ aria-hidden=“true“ preserveAspectRatio=“xMidYMid slice“ focusable=“false“>rect width=“100%“ height=“100%“ fill=“#007aff“>rect>svg>
strong class=“me-auto“>弹窗实例strong>
small class=“text-muted“>2 秒前small>
button type=“button“ class=“btn-close“ data-bs-dismiss=“toast“ aria-label=“Close“>button>
div>
div class=“toast-body“>
这是第一个消息
div>
div>
div>
div>
本文来源于互联网:Bootstrap5 消息弹窗(Toasts)