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