Bootstrap彈出框和警告框插件

?

學(xué)習(xí)要點(diǎn)：

　　1.彈出框

　　2.警告框

?

本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 中的彈出框和警告框插件。

?

一．彈出框

彈出框即點(diǎn)擊一個(gè)元素彈出一個(gè)包含標(biāo)題和內(nèi)容的容器。

基本用法

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

data-toggle="popover"彈出框事件綁定，寫在觸發(fā)彈出框的元素里，執(zhí)行彈出框事件點(diǎn)擊彈出或隱藏(Bootstrap)
title=""設(shè)置彈出框標(biāo)題，寫在彈出框元素里，(Bootstrap)
data-content=""設(shè)置彈出框內(nèi)容，寫在彈出框元素里，(Bootstrap)

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

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

js

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

?

?

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

data-animation 默認(rèn) true，在 popover 上應(yīng)用一個(gè) CSS fade 動(dòng)畫。如果設(shè)置 false，則不應(yīng)用。設(shè)置是否淡入淡出動(dòng)畫

?

data-html 默認(rèn) false，不允許提示內(nèi)容格式為 html。如果設(shè)置為 true，則可以設(shè)置 html 格式的提示內(nèi)容。設(shè)置內(nèi)容或標(biāo)題是否支持html標(biāo)簽

?

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

?

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

?

data-original-title 默認(rèn)空字符串，彈出框的標(biāo)題。優(yōu)先級(jí)比 title 低，設(shè)置標(biāo)題

?

title 默認(rèn)字空符串，彈出框的標(biāo)題。設(shè)置標(biāo)題

?

data-trigger 默認(rèn)值 click，表示怎么觸發(fā) popover，其他值為：hover、focus、manual。多個(gè)值用空格隔開，manual手動(dòng)不能和其他同時(shí)設(shè)置。設(shè)置觸發(fā)彈出框的事件

?

data-delay 默認(rèn)值 0，延遲觸發(fā) popover(毫秒)，如果傳數(shù)字則，表示 show/hide 的毫秒數(shù)，如果傳對(duì)象，結(jié)構(gòu)為：{show:500,hide:100}，設(shè)置顯示和隱藏的延遲時(shí)間

?

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

?

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

?

data-content 默認(rèn)值為空，彈出框的內(nèi)容。設(shè)置彈出框內(nèi)容

?

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

?

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

?

js

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

?

?

?

重點(diǎn)，以上屬性有兩種使用方式，1是在html標(biāo)簽里用屬性的方式，2是在js里用對(duì)象屬性的方式

html標(biāo)簽里用屬性的方式

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

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

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

?

?

彈出框方法

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

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

?

?

彈出框事件

show.bs.popover 在調(diào)用 show 方法時(shí)觸發(fā)(Bootstrap)
shown.bs.popover 在顯示整個(gè)彈窗時(shí)時(shí)觸發(fā)(Bootstrap)
hide.bs.popover 在調(diào)用 hide 方法時(shí)觸發(fā)(Bootstrap)
hidden.bs.popover 在完全關(guān)閉整個(gè)彈出時(shí)觸發(fā)(Bootstrap)

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

?

?

二．警告框

警告框即為點(diǎn)擊消失的信息框。

基本實(shí)例

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

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

?

添加淡入淡出效果

fade樣式class類，寫在警告框<div>里，設(shè)置警告框淡入淡出效果(Bootstrap)
in樣式class類，寫在警告框<div>里，設(shè)置警告框默認(rèn)顯示淡入淡出效果(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()警告框框方法，將警告框元素執(zhí)行警告框方法，一般在警告框區(qū)塊div元素上使用(Bootstrap)

?

close警告框方法參數(shù)，關(guān)閉警告框(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 () { //獲取警告框按鈕執(zhí)行點(diǎn)擊事件$('#alert').alert('close'); //點(diǎn)擊后關(guān)閉警告框 }) });

?

?

?

警告框事件

close.bs.alert ?當(dāng) close 方法被調(diào)用后立即觸發(fā)(Bootstrap)
closed.bs.alert ?當(dāng)警告框被完全關(guān)閉后立即觸發(fā)(Bootstrap)

$(function () {$('.close').on('click', function () { //獲取警告框按鈕執(zhí)行點(diǎn)擊事件$('#alert').alert('close'); //點(diǎn)擊后關(guān)閉警告框 });$('#alert').on('close.bs.alert', function () {alert('當(dāng) close 方法被觸發(fā)時(shí)調(diào)用！');});$('#alert').on('closed.bs.alert', function () {alert('當(dāng)警告框被完全關(guān)閉后立即觸發(fā)！');}); });

?

轉(zhuǎn)載于:https://www.cnblogs.com/adc8868/p/6806543.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。