Bootstrap彈出框和警告框插件

?

學習要點：

　　1.彈出框

　　2.警告框

?

本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。

?

一．彈出框

彈出框即點擊一個元素彈出一個包含標題和內容的容器。

基本用法

注意：必須在js結合popover()方法使用

data-toggle="popover"彈出框事件綁定，寫在觸發彈出框的元素里，執行彈出框事件點擊彈出或隱藏(Bootstrap)
title=""設置彈出框標題，寫在彈出框元素里，(Bootstrap)
data-content=""設置彈出框內容，寫在彈出框元素里，(Bootstrap)

popover()彈出框方法，將觸發彈出框元素執行彈出框方法，一般在button元素上使用(Bootstrap)

<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">點擊彈出/隱藏彈出框 </button>

js

$(function () {$('button').popover(); });

?

?

彈出框插件有很多屬性來配置提示的顯示，具體如下：

data-animation 默認 true，在 popover 上應用一個 CSS fade 動畫。如果設置 false，則不應用。設置是否淡入淡出動畫

?

data-html 默認 false，不允許提示內容格式為 html。如果設置為 true，則可以設置 html 格式的提示內容。設置內容或標題是否支持html標簽

?

data-placement 默認值 top，還有 bottom、left、right 和 auto。如果 auto 會自行調整合適的位置，如果是 auto left則會盡量在左邊顯示，但左邊不行就靠右邊。設置彈出框位置

?

data-selector 默認 false，可以選擇綁定指定的選擇器。可以在一個按鈕綁定一個指定的彈出框

?

data-original-title 默認空字符串，彈出框的標題。優先級比 title 低，設置標題

?

title 默認字空符串，彈出框的標題。設置標題

?

data-trigger 默認值 click，表示怎么觸發 popover，其他值為：hover、focus、manual。多個值用空格隔開，manual手動不能和其他同時設置。設置觸發彈出框的事件

?

data-delay 默認值 0，延遲觸發 popover(毫秒)，如果傳數字則，表示 show/hide 的毫秒數，如果傳對象，結構為：{show:500,hide:100}，設置顯示和隱藏的延遲時間

?

data-container 默認值 false，將 popover 附加到特定的元素上。比如組合按鈕組提示，容器不夠，可以附加 body 上。container : 'body'，也就是如果提示信息被容器遮擋，可以設置一個外層div，將提示信息的容器重新指定到設置的div上

?

data-template 更改提示框的 HTML 提示語的模版，默認值為：設置提示框模板
　　<div class="popover">
　　　　<div class="arrow"></div>
　　　　　　<h3 class="popover-title"></h3>
　　　　<div class="popover-content"></div>
　　</div>

?

data-content 默認值為空，彈出框的內容。設置彈出框內容

?

data-viewport 設置外圍容器的邊際，具體代碼看示例。

?

<div id="view"><button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">點擊彈出/隱藏彈出框</button> </div>

?

js

$(function () {$('button').popover({container:'#view',viewport: {selector: '#view',padding: 5,}}); });

?

?

?

重點，以上屬性有兩種使用方式，1是在html標簽里用屬性的方式，2是在js里用對象屬性的方式

html標簽里用屬性的方式

<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">點擊彈出/隱藏彈出框 </button>

2是在js里用對象屬性的方式，將上面的屬性去掉data就是js對象屬性

$(function () {$('button').popover({animation:true, //設置彈出框支持淡入淡出placement:'top' //設置彈出框頭部顯示 }); });

?

?

彈出框方法

show彈出框方法參數，顯示彈出框，(Bootstrap)
hide彈出框方法參數，隱藏彈出框，(Bootstrap)
toggle彈出框方法參數，反轉顯示和隱藏彈出框，(Bootstrap)
destroy彈出框方法參數，隱藏并銷毀彈出框，(Bootstrap)

$(function () {$('button').popover({animation: true, //設置彈出框支持淡入淡出placement: 'top' //設置彈出框頭部顯示 });//顯示$('button').popover('show');//隱藏$('button').popover('hide');//反轉顯示和隱藏$('button').popover('toggle');//隱藏并銷毀// $('button').popover('destroy'); });

?

?

彈出框事件

show.bs.popover 在調用 show 方法時觸發(Bootstrap)
shown.bs.popover 在顯示整個彈窗時時觸發(Bootstrap)
hide.bs.popover 在調用 hide 方法時觸發(Bootstrap)
hidden.bs.popover 在完全關閉整個彈出時觸發(Bootstrap)

$(function () {$('button').popover({animation: true, //設置彈出框支持淡入淡出placement: 'top' //設置彈出框頭部顯示 });$('button').on('show.bs.popover', function () {alert('在調用 show 方法時觸發！');});$('button').on('shown.bs.popover', function () {alert('在顯示整個彈窗時時觸發！');});$('button').on('hide.bs.popover', function () {alert('在調用 hide 方法時觸發！');});$('button').on('hidden.bs.popover', function () {alert('在完全關閉整個彈出時觸發！');}); });

?

?

二．警告框

警告框即為點擊消失的信息框。

基本實例

alert樣式class類，寫在<div>里，聲明一個警告框區塊(Bootstrap)
alert-danger樣式class類，寫在<div>里，設置警告框樣式為紅色(Bootstrap)
close樣式class類，寫在警告框里的<button>里，設置警告框關閉按鈕樣式(Bootstrap)
data-dismiss="alert"警告框事件，寫在警告框里的button里，點擊后關閉警告框(Bootstrap)

<div class="alert alert-danger"><button class="close" type="button" data-dismiss="alert"><span>&times;</span></button><p>警告：您的瀏覽器不支持！</p> </div>

?

添加淡入淡出效果

fade樣式class類，寫在警告框<div>里，設置警告框淡入淡出效果(Bootstrap)
in樣式class類，寫在警告框<div>里，設置警告框默認顯示淡入淡出效果(Bootstrap)

<div class="alert alert-danger fade in"><button class="close" type="button" data-dismiss="alert"><span>&times;</span></button><p>警告：您的瀏覽器不支持！</p> </div>

?

?

警告框方法

如果用 JavaScript，可以代替 data-dismiss="alert"事件

alert()警告框框方法，將警告框元素執行警告框方法，一般在警告框區塊div元素上使用(Bootstrap)

?

close警告框方法參數，關閉警告框(Bootstrap)

html

<div id="alert" class="alert alert-danger fade in"><button class="close" type="button"><span>&times;</span></button><p>警告：您的瀏覽器不支持！</p> </div>

js

$(function () {$('.close').on('click', function () { //獲取警告框按鈕執行點擊事件$('#alert').alert('close'); //點擊后關閉警告框 }) });

?

?

?

警告框事件

close.bs.alert ?當 close 方法被調用后立即觸發(Bootstrap)
closed.bs.alert ?當警告框被完全關閉后立即觸發(Bootstrap)

$(function () {$('.close').on('click', function () { //獲取警告框按鈕執行點擊事件$('#alert').alert('close'); //點擊后關閉警告框 });$('#alert').on('close.bs.alert', function () {alert('當 close 方法被觸發時調用！');});$('#alert').on('closed.bs.alert', function () {alert('當警告框被完全關閉后立即觸發！');}); });

?

轉載于:https://www.cnblogs.com/adc8868/p/6806543.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的第二百四十六节，Bootstrap弹出框和警告框插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。