首頁 > 文章 > web前端 > 深入了解Bootstrap中的彈出框

深入了解Bootstrap中的彈出框

青灯夜游轉載: 2021-04-15 11:14:052036瀏覽

本篇文章給大家詳細介紹一下Bootstrap中的彈出框。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

深入了解Bootstrap中的彈出框

表面上看，彈出框其實就是一種特殊的提示框，只是多了一個標題而已。但實際上，還是有不同之處的。

基本用法

在製作提示框（tooltip）時，可以使用

於是最基本的用法如下

1、透過 title 屬性的值來定義標題(也可以使用自訂屬性src-title 來設定標題)，title優先權高

2、透過data-content屬性來設定內容

3、設定data-toggle="popover"

深入了解Bootstrap中的彈出框

# 4.使用以下js程式碼進行觸發

$('[data-toggle="popover"]').popover();

<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

#屬性參數

在彈出方塊製作時，可以在HTML中定義下表所列的自訂屬性

深入了解Bootstrap中的彈出框 [注意]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(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

JS觸發深入了解Bootstrap中的彈出框

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(){
    $(&#39;[data-toggle="popover"]&#39;).popover({
        title:"我是标题",
        content:&#39;我是内容&#39;
    });
});    
</script>

【關鍵字】

　　除了使用options對象，還可以使用關鍵字，'show'、'hide'、'toggle'、'destroy '

<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(){
    $(&#39;#btn1&#39;).popover(&#39;show&#39;);//显示弹出框
    $(&#39;#btn2&#39;).popover(&#39;hide&#39;);//关闭弹出框
    $(&#39;#btn3&#39;).popover(&#39;toggle&#39;);//反转弹出框
    $(&#39;#btn4&#39;).popover(&#39;destroy&#39;);//隐藏并销毁弹出框
});    
</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(){
    $(&#39;#btn&#39;).popover();
    $("#btn").on("show.bs.popover",function(e){
        $(this).html(&#39;关闭&#39;);    
    }).on("hide.bs.popover",function(e){
        $(this).html(&#39;打开&#39;);
    })

});    
</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中文網其他相關文章！

陳述：

本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：詳解Bootstrap中的訊息提示框下一篇：詳解Bootstrap中的訊息提示框

看更多