Bootstrap5 彈出框

彈出框控件類似于提示框，它在鼠標點擊到元素后顯示，與提示框不同的是它可以顯示更多的內(nèi)容。

港北網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

如何創(chuàng)建彈出框

通過向元素添加 data-bs-toggle="popover" 來來創(chuàng)建彈出框。

title 屬性的內(nèi)容為彈出框的標題，data-bs-content 屬性顯示了彈出框的文本內(nèi)容：

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"

data-bs-toggle
=
"
popover
"

title
=
"
彈出框標題
"

data-bs-content
=
"
彈出框內(nèi)容
"
>
多次點我
button
>

注意: 彈出框要寫在 JavaScript 的初始化代碼里。

以下實例可以在文檔的任何地方使用彈出框：

實例

var

popoverTriggerList
=
[
]
.
slice
.
call
(
document
.
querySelectorAll
(
'
[data-bs-toggle="popover"]
'
)
)

var

popoverList
=
popoverTriggerList
.
map
(
function

(
popoverTriggerEl
)

{

return

new

bootstrap
.
Popover
(
popoverTriggerEl
)

}
)

嘗試一下 ?

指定彈出框的位置

默認情況下彈出框顯示在元素右側(cè)。

可以使用 data-bs-placement 屬性來設定彈出框顯示的方向: top, bottom, left 或 right:

實例

<
a

href
=
"
#
"

title
=
"
標題
"

data-bs-toggle
=
"
popover
"

data-bs-placement
=
"
top
"

data-bs-content
=
"
我是內(nèi)容部分
"
>
點我
a
>

<
a

href
=
"
#
"

title
=
"
標題
"

data-bs-toggle
=
"
popover
"

data-bs-placement
=
"
bottom
"

data-bs-content
=
"
我是內(nèi)容部分
"
>
點我
a
>

<
a

href
=
"
#
"

title
=
"
標題
"

data-bs-toggle
=
"
popover
"

data-bs-placement
=
"
left
"

data-bs-content
=
"
我是內(nèi)容部分
"
>
點我
a
>

<
a

href
=
"
#
"

title
=
"
標題
"

data-bs-toggle
=
"
popover
"

data-bs-placement
=
"
right
"

data-bs-content
=
"
我是內(nèi)容部分
"
>
點我
a
>

嘗試一下 ?

關(guān)閉彈出框

默認情況下，彈出框在再次點擊指定元素后就會關(guān)閉，你可以使用 data-bs-trigger="focus" 屬性來設置在鼠標點擊元素外部區(qū)域來關(guān)閉彈出框：

實例

<
a

href
=
"
#
"

title
=
"
取消彈出框
"

data-bs-toggle
=
"
popover
"

data-bs-trigger
=
"
focus
"

data-bs-content
=
"
點擊文檔的其他地方關(guān)閉我
"
>
點我
a
>

嘗試一下 ?

提示:如果你想實現(xiàn)在鼠標移動到元素上顯示，移除后消失的效果，可以使用 data-bs-trigger 屬性，并設置值為 "hover":

實例

<
a

href
=
"
#
"

title
=
"
標題
"

data-bs-toggle
=
"
popover
"

data-bs-trigger
=
"
hover
"

data-bs-content
=
"
一些內(nèi)容
"
>
鼠標移動到我這
a
>

嘗試一下 ?

文章標題：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5彈出框
網(wǎng)站URL：http://www.5511xx.com/article/cogisic.html