這篇文章給大家分享的是有關(guān)bootstrap關(guān)閉彈出框的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為凌源等服務(wù)建站，凌源等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為凌源企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

bootstrap關(guān)閉彈出框的方法：首先向元素添加“data-toggle=“popover””來(lái)創(chuàng)建彈出框；然后使用“data-trigger=“focus””屬性來(lái)設(shè)置在鼠標(biāo)點(diǎn)擊元素外部區(qū)域來(lái)關(guān)閉彈出框即可。

bootstrap彈出框

通過(guò)向元素添加 data-toggle=“popover” 來(lái)創(chuàng)建彈出框。

• title 屬性的內(nèi)容為彈出框的標(biāo)題。

• data-content 屬性顯示了彈出框的文本內(nèi)容。

• 默認(rèn)情況下彈出框顯示在元素右側(cè)?？梢允褂?data-placement 屬性來(lái)設(shè)定彈出框顯示的方向: 上：top, 下：bottom, 左：left 或 右：right。

bootstrap怎么關(guān)閉彈出框？

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

實(shí)現(xiàn)“點(diǎn)擊并讓彈出框消失”的效果需要一些額外的代碼

為了更好的跨瀏覽器和跨平臺(tái)效果，你必須使用 標(biāo)簽，不能使用 標(biāo)簽，并且，還必須包含 role="button" 和 tabindex 屬性。

推薦：《bootstrap教程》

例：

點(diǎn)我

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

鼠標(biāo)移動(dòng)到我這

感謝各位的閱讀！關(guān)于“bootstrap關(guān)閉彈出框的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前文章：bootstrap關(guān)閉彈出框的方法
當(dāng)前地址：http://weahome.cn/article/ihpejs.html