首頁 > web前端 > Bootstrap教程 > bootstrap 怎麼關閉彈出框

bootstrap 怎麼關閉彈出框

藏色散人
發布: 2023-01-13 00:22:22
原創
2813 人瀏覽過

bootstrap關閉彈出框的方法:首先在元素上新增「data-toggle=「popover」」來建立彈出框;然後使用「data-trigger=「focus」」屬性來設定在滑鼠點選元素外部區域來關閉彈出框即可。

bootstrap 怎麼關閉彈出框

本文操作環境:Windows7系統、bootstrap3、Dell G3電腦。

bootstrap彈出框

透過向元素新增 data-toggle=“popover” 來建立彈出框。

  • title 屬性的內容為彈出框的標題。

  • data-content 屬性顯示了彈出方塊的文字內容。

  • 預設情況下彈出框顯示在元素右側。可以使用 data-placement 屬性設定彈出框顯示的方向: 上:top, 下:bottom, 左:left 或 右:right。

bootstrap怎麼關掉彈出框?

預設情況下,彈出框在再次點擊指定元素後就會關閉,可以使用 data-trigger=“focus” 屬性來設定在滑鼠點擊元素外部區域來關閉彈出框。

實現「點擊並讓彈出框消失」的效果需要一些額外的程式碼

為了更好的跨瀏覽器和跨平台效果,你必須使用 標籤,不能使用

推薦:《bootstrap教程

範例:

<a tabindex="0" href="#" role="button" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">
点我
</a>
登入後複製

bootstrap 怎麼關閉彈出框

如果你想實現在滑鼠移到元素上顯示,移除後消失的效果,可以使用data-trigger 屬性,並設定值為"hover":

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">
鼠标移动到我这
</a>
登入後複製

bootstrap 怎麼關閉彈出框

以上是bootstrap 怎麼關閉彈出框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板