首頁 >web前端 >Bootstrap教程 >深入了解Bootstrap中的彈出框
本篇文章給大家詳細介紹一下Bootstrap中的彈出框。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
表面上看,彈出框其實就是一種特殊的提示框,只是多了一個標題而已。但實際上,還是有不同之處的。
在製作提示框(tooltip)時,可以使用
於是最基本的用法如下
1、透過 title 屬性的值來定義標題(也可以使用自訂屬性src-title 來設定標題),title優先權高
2、透過data-content屬性來設定內容
3、設定data-toggle="popover"
$('[data-toggle="popover"]').popover();
<button>点我弹出/隐藏弹出框</button> <script> $(function(){ $('[data-toggle="popover"]').popover(); }); </script>在彈出方塊製作時,可以在HTML中定義下表所列的自訂屬性
[注意]data-palcement預設居右顯示,而不是居上顯示
##<body style="margin-top:100px">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="上侧" >上侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="下侧" >下侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover();
});
</script>
JS觸發
popover的JS用法與tooltip的用法一樣,支援使用options物件的方法來向popover()方法傳參$(element).popover(options);
options物件裡的參數包括amimation、html、placement、selector、original-title、title、trigger、delay、container、template
詳細情況
移步至此##
<body style="margin-top:50px"> <button type="button" class="btn btn-default" data-toggle="popover" >按钮</button> <script> $(function(){ $('[data-toggle="popover"]').popover({ title:"我是标题", content:'我是内容' }); }); </script>
<body style="margin-top:100px;"> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn1">按钮1</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn2">按钮2</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn3">按钮3</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn4">按钮4</button> <script> $(function(){ $('#btn1').popover('show');//显示弹出框 $('#btn2').popover('hide');//关闭弹出框 $('#btn3').popover('toggle');//反转弹出框 $('#btn4').popover('destroy');//隐藏并销毁弹出框 }); </script>【事件】
#該外掛程式支援5種類型的事件訂閱
show.bs.tooltip show方法调用之后立即触发该事件 shown.bs.tooltip 此事件在tooltip已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发 hide.bs.tooltip hide方法调用之后立即触发该事件。 hidden.bs.tooltip 此事件在tooltip被隐藏(并且同时在 CSS 过渡效果完成)之后被触发 inserted.bs.tooltip 当tooltip模板加载到DOM中上时,在show.bs.tooltip触发后,触发该事件
<body style="margin-top:50px;"> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="标题" data-content="内容" id="btn">按钮</button> <script> $(function(){ $('#btn').popover(); $("#btn").on("show.bs.popover",function(e){ $(this).html('关闭'); }).on("hide.bs.popover",function(e){ $(this).html('打开'); }) }); </script>####比較提示框#########1、提示框tooltip 的預設觸發事件是 hover 和 focus,而彈出框popover 是 click######2、提示框tooltip 只有一個內容(title),而彈出框不僅可以設定標題(title)還可以設定內容(content)######3、提示框tooltip 預設居上顯示,而彈出框popover 預設居右顯示######4、顯示範本不同######提示框tooltip的範本:###
<div> <div></div> <div></div> </div>###彈出框popover的範本:###
<div> <div></div> <h3></h3> <div></div> </div>###更多程式相關知識,請造訪:###程式設計教學###! ! ###
以上是深入了解Bootstrap中的彈出框的詳細內容。更多資訊請關注PHP中文網其他相關文章!