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

在河津等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷,外貿(mào)網(wǎng)站制作,河津網(wǎng)站建設(shè)費(fèi)用合理。

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

bootstrap彈出框

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

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

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

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

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

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

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

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

推薦：《bootstrap教程》

例：

<a tabindex="0" href="#" role="button" title="取消彈出框" data-toggle="popover" data-trigger="focus" data-content="點(diǎn)擊文檔的其他地方關(guān)閉我">
點(diǎn)我
</a>

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

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些內(nèi)容">
鼠標(biāo)移動到我這
</a>

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

當(dāng)前文章：bootstrap關(guān)閉彈出框的方法-創(chuàng)新互聯(lián)
本文來源：http://www.rwnh.cn/article8/jcdip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)