Bootstrap5 消息弹窗(Toasts)

Bootstrap5 弹窗 (Toasts) 是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。

公司主营业务：成都网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出姑苏免费做网站回馈大家。

弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。

弹窗可以在页面的不同位置显示，包括左上角、右上角、左下角、右下角以及页面底部中央。

如何创建弹窗

要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。

注意：弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在 元素上添加 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
>



尝试一下 »

本文题目：创新互联Bootstrap5教程：Bootstrap5消息弹窗(Toasts)
分享路径：http://www.csdahua.cn/qtweb/news6/62606.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网