建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Bootstrap5 消息彈窗(Toasts)
Bootstrap5 彈窗 (Toasts) 是一種輕量級(jí)的通知組件，用于在頁(yè)面的角落或底部顯示臨時(shí)性的信息、通知或警告。
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)推出姑蘇免費(fèi)做網(wǎng)站回饋大家。
彈窗通常用于向用戶(hù)顯示短期消息，比如成功消息、錯(cuò)誤消息、警告或其他通知。
彈窗可以在頁(yè)面的不同位置顯示，包括左上角、右上角、左下角、右下角以及頁(yè)面底部中央。
如何創(chuàng)建彈窗
要?jiǎng)?chuàng)建彈窗可以使用 .toast 類(lèi)，并在該類(lèi)里添加 .toast-header 和 .toast-body 類(lèi)來(lái)表示標(biāo)題和內(nèi)容。
注意：彈窗默認(rèn)是關(guān)閉的，可以使用 .show 來(lái)設(shè)置顯示，關(guān)閉彈窗可以在
實(shí)例
<
div
class
=
"
toast show
"
>
<
div
class
=
"
toast-header
"
>
彈窗標(biāo)題
<
button
type
=
"
button
"
class
=
"
btn-close
"
data-bs-dismiss
=
"
toast
"
>
button
>
div
>
<
div
class
=
"
toast-body
"
>
這是一個(gè)Bootstrap 5彈窗示例。
div
>
div
>
嘗試一下 ?
要通過(guò)點(diǎn)擊按鈕顯示彈窗，您需要使用 JavaScript 對(duì)其進(jìn)行初始化：通過(guò) ID 獲取指定元素的點(diǎn)擊事件并調(diào)用 toast() 方法。
當(dāng)點(diǎn)擊按鈕時(shí)，以下代碼將顯示頁(yè)面中的所有 toast 類(lèi)：
實(shí)例
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
(
)
)
}
嘗試一下 ?
將彈窗顯示在右下角：
實(shí)例
<
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
"
>
這是一個(gè)Bootstrap 5彈窗示例。
div
>
div
>
div
>
嘗試一下 ? 設(shè)置多個(gè)消息彈窗：
實(shí)例
<
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
"
>
彈窗實(shí)例
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
"
>
這是第二個(gè)消息
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
"
>
彈窗實(shí)例
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
"
>
這是第一個(gè)消息
div
>
div
>
div
>
div
>
嘗試一下 ?
網(wǎng)站名稱(chēng)：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5消息彈窗(Toasts)
分享網(wǎng)址：http://fisionsoft.com.cn/article/djhosep.html
