Bootstrap4 彈出框

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

創(chuàng)新互聯(lián)建站自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元南溪做網(wǎng)站,已為上家服務(wù),為南溪各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

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

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

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

<
a

href
=
"
#
"

data-toggle
=
"
popover
"

title
=
"
彈出框標(biāo)題
"

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

注意:彈出框要寫在 jQuery 的初始化代碼里: 然后在指定的元素上調(diào)用 popover() 方法。

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

實(shí)例

$
(
document
)
.
ready
(
function
(
)
{
$
(
'
[data-toggle="popover"]
'
)
.
popover
(
)
;
}
)
;

嘗試一下 ?

指定彈出框的位置

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

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

實(shí)例

<
a

href
=
"
#
"

title
=
"
Header
"

data-toggle
=
"
popover
"

data-placement
=
"
top
"

data-content
=
"
Content
"
>
點(diǎn)我
a
>

<
a

href
=
"
#
"

title
=
"
Header
"

data-toggle
=
"
popover
"

data-placement
=
"
bottom
"

data-content
=
"
Content
"
>
點(diǎn)我
a
>

<
a

href
=
"
#
"

title
=
"
Header
"

data-toggle
=
"
popover
"

data-placement
=
"
left
"

data-content
=
"
Content
"
>
點(diǎn)我
a
>

<
a

href
=
"
#
"

title
=
"
Header
"

data-toggle
=
"
popover
"

data-placement
=
"
right
"

data-content
=
"
Content
"
>
點(diǎn)我
a
>

嘗試一下 ?

按鈕中使用:

實(shí)例

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-container
=
"
body
"

data-toggle
=
"
popover
"

data-placement
=
"
top
"

data-content
=
"
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
"
>
Popover on top
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-container
=
"
body
"

data-toggle
=
"
popover
"

data-placement
=
"
right
"

data-content
=
"
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
"
>
Popover on right
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-container
=
"
body
"

data-toggle
=
"
popover
"

data-placement
=
"
bottom
"

data-content
=
"
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
"
>
Popover on bottom
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-container
=
"
body
"

data-toggle
=
"
popover
"

data-placement
=
"
left
"

data-content
=
"
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
"
>
Popover on left
button
>

嘗試一下 ?

關(guān)閉彈出框

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

實(shí)例

<
a

href
=
"
#
"

title
=
"
取消彈出框
"

data-toggle
=
"
popover
"

data-trigger
=
"
focus
"

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

嘗試一下 ?

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

實(shí)例

<
a

href
=
"
#
"

title
=
"
Header
"

data-toggle
=
"
popover
"

data-trigger
=
"
hover
"

data-content
=
"
一些內(nèi)容
"
>
鼠標(biāo)移動(dòng)到我這
a
>

嘗試一下 ?

新聞標(biāo)題：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4彈出框
新聞來源：http://m.fisionsoft.com.cn/article/ccssjeh.html