Bootstrap5 消息弹窗(Toasts)
Bootstrap5 弹窗 (Toasts) 是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。
弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。
弹窗可以在页面的不同位置显示，包括左上角、右上角、左下角、右下角以及页面底部中央。
如何创建弹窗
要创建弹窗可以使用
.toast
类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。
注意：
弹窗默认是关闭的，可以使用
.show
来设置显示，关闭弹窗可以在 <button>元素上添加
data-bs-dismiss="toast"
:
实例
<
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
>
尝试一下 »
要通过点击按钮显示弹窗，您需要使用 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
(
)
)
}
尝试一下 »
将弹窗显示在右下角：
实例
<
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 Toast
</
strong
>
<
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 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
>
尝试一下 »
