bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的話
在 Bootstrap 框架中把模態彈出框統一稱為 Modal。這種彈出框效果在大多數 Web 網站的交互中都可見。比如點擊一個按鈕彈出一個框，彈出的框可能是一段文件描述，也可能帶有按鈕操作，也有可能彈出的是一張圖片。本文將詳細介紹Bootstrap模態彈出框
結構分析
Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分：
? 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕
? 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容
? 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕
×Close
模態彈出窗標題
模態彈出窗主體內容
對于彈窗而言，modal-content是樣式的關鍵。主要設置了彈窗的邊框、邊距、背景色和陰影等樣式.modal-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box; background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
除此之外，modal-content中的modal-header、modal-body和modal-footer三個部分樣式設置如下.modal-header {
min-height: 16.42857143px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}.modal-header .close {
margin-top: -2px;
}.modal-title {
margin: 0;
line-height: 1.42857143;
}.modal-body {
position: relative;
padding: 15px;
}.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
這三個部分主要控制一些間距的樣式。而modal-footer都是用來放置按鈕，所以底部還對包含的按鈕做了一定的樣式處理.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
觸發方式
眾所周知，模態彈出窗在頁面加載完成時，是被隱藏在頁面中的，只有通過一定的動作(事件)才能觸發模態彈出窗的顯示。在Bootstrap框架中實現方法有2種
在介紹觸發方式之前，首先要說明.show和.fade這兩個方法。只有模態彈出窗默認是隱藏的，才能觸發其顯示.fade {opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}.show {display: block!important;
}
【方法一】
模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target(bootstrap中聲明式觸發方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss="")
data-toggle必須設置為modal(toggle中文翻譯過來就是觸發器)；
data-target可以設置為CSS的選擇符，也可以設置為模態彈出窗的ID值，一般情況設置為模態彈出窗的ID值，因為ID值是唯一的值點擊
×Close
模態彈出窗標題
模態彈出窗主體內容
【方法二】
觸發模態彈出窗也可以是一個鏈接元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性
不過建議還是使用統一使用data-target的方式來觸發點擊
×Close
模態彈出窗標題
模態彈出窗主體內容
尺寸
Bootstrap框架為模態彈出窗提供了不同尺寸，一個是大尺寸樣式“modal-lg”，另一個是小尺寸樣式“modal-sm”。其結構上稍做調整
[注意].bs-example-modal-lg和.bs-example-modal-sm是自定義的名稱，而非必須
大尺寸默認尺寸小尺寸小火柴的藍色理想
小火柴的藍色理想
小火柴的藍色理想
CSS解析
bootstrap中的“模態彈出框”有以下幾個特點：
1、模態彈出窗是固定在瀏覽器中的。
2、單擊右側全屏按鈕，在全屏狀態下，模態彈出窗寬度是自適應的，而且modal-dialog水平居中。
3、當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px
4、模態彈出窗的背景常常有一個透明的蒙層效果
5、觸發彈窗時，彈窗是從上到下、逐漸浮現到頁面前的
【固定在瀏覽器實現】.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
【水平居中實現】.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
【當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px實現】@media (min-width: 768px) {
.modal-dialog {
width: 600px;margin: 30px auto;
}
.modal-content {-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {width: 300px;
}}
【蒙版】
彈窗彈出時為
元素添加 .modal-open類，從而覆蓋頁面默認的滾動行為，并且還會自動生成一個 .modal-backdrop 元素用于提供一個可點擊的區域，點擊此區域就即可關閉模態框.modal-open {overflow: hidden;}.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
給其添加了一個過渡動畫，從fade到in，把opacity值從0變成了0.5.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
【動畫效果】
彈窗的動畫內容是從-25%的top值位置到top:0的位置.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out;
-webkit-transform: translate3d(0, -25%, 0); -o-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0);
}.modal.in .modal-dialog {
-webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
如果不需要模態框彈出時的動畫效果(淡入淡出效果)，刪掉 .fade 類即可點擊
×Close
模態彈出窗標題
模態彈出窗主體內容
參數說明
除了通過data-toggle和data-target來控制模態彈出窗之外，Bootstrap框架針對模態彈出框還提供了其他自定義data-屬性，來控制模態彈出窗。有關Modal彈出窗自定義屬性相關說明如下所示
該參數設置在按鈕上，或者彈窗上都可以。出于方便，一般地，在按鈕上設置
[注意]屬性值一定要加引號，如data-backdrop="false"
如果想要支持esc鍵關閉彈窗，需要在彈窗上設置tabindex="-1"
默認樣式無蒙版ESC失效彈窗默認不顯示
×Close
小火柴的藍色理想
好的代碼像粥一樣，都是用時間熬出來的
tabindex="-1" id="mymodal2">
×
Close
小火柴的藍色理想
好的代碼像粥一樣，都是用時間熬出來的
tabindex="-1" id="mymodal3">
×
Close
小火柴的藍色理想
好的代碼像粥一樣，都是用時間熬出來的
tabindex="-1" id="mymodal4">
×
Close
小火柴的藍色理想
好的代碼像粥一樣，都是用時間熬出來的
JS觸發
除了使用自定義屬性data-觸發模態彈出框之外，還可以通過JavaScript方法來觸發模態彈出窗。比如說給按鈕設置一個單擊事件，然后觸發模態彈出窗
只需一行 JavaScript 代碼，即可通過元素的 id myModal 調用模態框$('#myModal').modal()點擊
tabindex="-1" id="mymodal">
×
Close
小火柴的藍色理想
好的代碼像粥一樣，都是用時間熬出來的
使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置
【屬性設置】
模態彈出窗默認支持的自定義屬性主要有
不想讓用戶按ESC鍵關閉模態彈出窗，可以這樣做$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false});
});
});
【參數設置】
在Bootstrap框架中還為模態彈出窗提供了三種參數設置，具體說明如下
打開(關閉)
×
Close
小火柴的藍色理想
好的代碼像粥一樣，都是用時間熬出來的
$("#btn").click(function(){
$("#mymodal").modal("toggle");
});
});
【事件設置】
模態彈窗還支持五種類型的事件，分別是模態彈出窗的彈出前、彈出后，關閉前、關閉后及遠端數據加載后，具體描述如下：
打開
tabindex="-1" id="mymodal" >
×
Close
小火柴的藍色理想
好的代碼像粥一樣，都是用時間熬出來的
JS解析
【1】IIFE
使用立即調用函數，防止插件內代碼外泄，從而形成一個閉環，并且只能從jQuery的fn里進行擴展+function ($) {//使用es5嚴格模式'use strict';//}(window.jQuery);
【2】初始設置var Modal = function (element, options) {
this.options
= options//options是設置選項this.$body
= $(document.body)//body元素this.$element
= $(element)element表示modal彈出框容器及內容元素this.$dialog
= this.$element.find('.modal-dialog')//彈窗對象this.$backdrop
= null //蒙版對象this.isShown
= null //彈窗是否顯示的標識this.originalBodyPad
= null //body的padding-right標識this.scrollbarWidth
= 0 //滾動條寬度為0this.ignoreBackdropClick = false //默認蒙板可點擊
//如果設置了remote，就加載remote指定url的內容到modal-content樣式的元素內，并觸發loaded.bs.modal事件
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
} //組件版本號3.3.7
Modal.VERSION = '3.3.7' //動畫持續時間300ms
Modal.TRANSITION_DURATION = 300 //蒙版動畫持續時間150ms
Modal.BACKDROP_TRANSITION_DURATION = 150 //默認設置
Modal.DEFAULTS = {
backdrop: true, //顯示蒙版keyboard: true, //按ESC鍵關閉彈窗show: true //單擊觸發元素時打開彈窗
}
【3】插件核心代碼
主要是Modal核心類函數的定義、默認參數的定義和9個原型方法的定義，這9個原型方法主要是處理彈窗的反轉、打開、關閉和彈窗背景設置、取消等操作// 反轉彈窗(打開或關閉)
Modal.prototype.toggle = function (_relatedTarget) {//如果彈窗處于顯示狀態，則調用hide()方法，關閉它；否則，調用show()方法，打開彈窗return this.isShown ? this.hide() : this.show(_relatedTarget)
} // 打開彈窗
Modal.prototype.show = function (_relatedTarget) {//保存this值var that = this//定義彈窗前的觸發事件
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })//打開彈窗前，觸發事件
this.$element.trigger(e)// 如果已經打開了(或者曾經被阻止過)，則退出執行，后續代碼不做處理
if (this.isShown || e.isDefaultPrevented())
return//設置彈窗顯示標識為true
this.isShown = truethis.checkScrollbar()this.setScrollbar()this.$body.addClass('modal-open')//處理鍵盤事件，主要是設置按esc鍵時是否關閉彈窗
this.escape()this.resize()// 如果單擊了元素內的子元素(帶有[data-dismiss="modal"]屬性)，則關閉彈窗
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))//點擊彈窗時，如果鼠標的目標是當前彈窗，則將默認蒙板不可點擊的標識置為true，并不可再設置
this.$dialog.on('mousedown.dismiss.bs.modal', function () {
that.$element.one('mouseup.dismiss.bs.modal', function (e) {
if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true })
})//繪制蒙版后，處理以下代碼this.backdrop(function () {
// 判斷瀏覽器是否支持動畫，并且彈窗是否設置了動畫過渡效果(是否有fade樣式)
var transition = $.support.transition && that.$element.hasClass('fade')
// 如果modal彈窗沒有父容器，則將它附加到body上
if (!that.$element.parent().length) {
that.$element.appendTo(that.$body)
} // 顯示modal彈窗 that.$element
.show()
.scrollTop(0)
that.adjustDialog() // 如果支持動畫，強制刷新UI現場，重繪彈窗 if (transition) {
that.$element[0].offsetWidth
} // 給modal彈窗添加in樣式，和modal樣式一起 that.$element.addClass('in') // 強制給彈窗設定焦點 that.enforceFocus() // 打開彈窗顯示后的觸發事件 var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?that.$dialog //找到彈窗元素 .one('bsTransitionEnd', function () {// 如果支持動畫，則動畫結束以后給彈窗內的元素設置焦點，并觸發shown事件that.$element.trigger('focus').trigger(e)
})
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :// 否則直接設置焦點，并觸發shown事件 that.$element.trigger('focus').trigger(e)
})
} // 關閉彈窗
Modal.prototype.hide = function (e) {//阻止冒泡
if (e) e.preventDefault()//定義關閉彈窗前的觸發事件
e = $.Event('hide.bs.modal')//關閉彈窗前觸發事件
this.$element.trigger(e)// 如果已經關閉了(或者曾經被阻止過)，則退出執行，后續代碼不做處理
if (!this.isShown || e.isDefaultPrevented()) return//設置顯示狀態標識為false
this.isShown = false//處理鍵盤事件，主要是設置按Esc鍵的時候是否關閉彈窗
this.escape()this.resize()//取消所有的focusin.bs.modal事件
$(document).off('focusin.bs.modal')this.$element
.removeClass('in') //刪除in樣式
.off('click.dismiss.bs.modal') //取消dismiss的單擊事件
.off('mouseup.dismiss.bs.modal')//取消dismiss的鼠標抬起事件//取消dismiss的鼠標放下事件
this.$dialog.off('mousedown.dismiss.bs.modal')//如果支持動畫，則動畫結束以后再關閉，否則直接關閉
$.support.transition && this.$element.hasClass('fade') ? this.$element
.one('bsTransitionEnd', $.proxy(this.hideModal, this))
.emulateTransitionEnd(Modal.TRANSITION_DURATION) : this.hideModal()
} //強制彈窗處于焦點狀態
Modal.prototype.enforceFocus = function () {
$(document) // 禁用所有的focusin事件，防止無限循環 .off('focusin.bs.modal')
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
// 如果處于焦點的元素不是當前元素(或不包含當前元素)，則強制給當前元素設置焦點
this.$element.trigger('focus')
}
}, this))
} //按Esc鍵是否退出的處理
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) { //如果彈窗是打開狀態，并且keyboard選項為true，則說明允許按ESC鍵可以關閉彈窗
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {//檢測鍵盤事件，如果是ESC(keycode=27)，則關閉
e.which == 27 && this.hide()
}, this))
} else if (!this.isShown) { // 否則，取消鍵盤事件檢測
this.$element.off('keydown.dismiss.bs.modal')
}
}
Modal.prototype.resize = function () {if (this.isShown) {
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
} else {
$(window).off('resize.bs.modal')
}
} //關閉彈窗
Modal.prototype.hideModal = function () {
var that = this//關閉彈窗
this.$element.hide()this.backdrop(function () { //移除body上的modal-open樣式
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar() //關閉以后，觸發hidden事件
that.$element.trigger('hidden.bs.modal')
})
}
//刪除蒙版，關閉彈窗時觸發
Modal.prototype.removeBackdrop = function () {// 刪除蒙版
this.$backdrop && this.$backdrop.remove()// 設置蒙版對象為null
this.$backdrop = null
}
//添加蒙版，打開彈窗時觸發
Modal.prototype.backdrop = function (callback) {
var that = this//是否設置了動畫過渡效果，如果是則將animate設置為fade
var animate = this.$element.hasClass('fade') ? 'fade' : ''//如果是打開狀態，并且設置了backdrop參數
if (this.isShown && this.options.backdrop) { //定義動畫標識
var doAnimate = $.support.transition && animate // 在body上定義蒙版p元素，并附加fade標識以支持動畫
this.$backdrop = $(document.createElement('p'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body) //蒙版被單擊時進行判斷：如果backdrop參數為static，則強制將彈窗設置為售點；否則，關閉彈窗
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {if (this.ignoreBackdropClick) {
this.ignoreBackdropClick = false return}if (e.target !== e.currentTarget) returnthis.options.backdrop == 'static'
? this.$element[0].focus()
: this.hide()
}, this)) // 如果支持動畫，強制刷新UI現場，重繪彈窗 if (doAnimate) this.$backdrop[0].offsetWidth
//添加in樣式 this.$backdrop.addClass('in') //如果沒有回調，則直接返回
if (!callback)
return // 如果支持動畫，則動畫結束執行回調函數；否則，直接執行回調函數
doAnimate ?this.$backdrop
.one('bsTransitionEnd', callback)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callback() //如果是關閉狀態，但蒙版對象依然還存在
}
else if (!this.isShown && this.$backdrop) { //去除in樣式
this.$backdrop.removeClass('in')
var callbackRemove = function () {
that.removeBackdrop()
callback && callback()
} // 如果支持動畫，則動畫結束執行回調函數；否則，直接執行回調函數
$.support.transition && this.$element.hasClass('fade') ?this.$backdrop
.one('bsTransitionEnd', callbackRemove)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callbackRemove()
} else if (callback) {
callback()
}
}
【4】滾動條處理
在彈窗插件中，使用了大量的代碼對滾動條進行處理Modal.prototype.handleUpdate = function () {this.adjustDialog()
} //處理因為滾動條而使彈窗位置不固定問題
Modal.prototype.adjustDialog = function () {//如果元素的高度大于頁面的高度，即溢出屏幕，則modalIsOverflowing置為true
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight//將元素的paddingLeft和paddingRight設置為scrollbarWidth
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''})
} //重置調節器
Modal.prototype.resetAdjustments = function () {//將元素的paddingLeft和paddingRight置為空this.$element.css({
paddingLeft: '',
paddingRight: ''})
} //檢查滾動條
Modal.prototype.checkScrollbar = function () {//fullWindowWidth儲存頁面寬度
var fullWindowWidth = window.innerWidth//IE8-瀏覽器不支持innerWidth屬性
if (!fullWindowWidth) { //使用getBoundingClientRect方法來獲得頁面寬度
var documentElementRect = document.documentElement.getBoundingClientRect()
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
}//如果有滾動條，則bodyIsOverflowing置為true
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth//將scrollbarWidth置為實際的滾動條寬度
this.scrollbarWidth = this.measureScrollbar()
} //用來為body元素設置padding-right的值，防止body元素被scrollbar阻擋
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)this.originalBodyPad = document.body.style.paddingRight || ''//如果頁面存在滾動條，則body的padding-right設置為默認的padding-right加上滾動條的寬度
if (this.bodyIsOverflowing)
this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
} //重置滾動條
Modal.prototype.resetScrollbar = function () {//將body的padding-right值設置為null
this.$body.css('padding-right', this.originalBodyPad)
}
//測量滾動條寬度
Modal.prototype.measureScrollbar = function () {var scrollDiv = document.createElement('p')
scrollDiv.className = 'modal-scrollbar-measure'this.$body.append(scrollDiv)//滾動條寬度等于offetWidth
- clientWidthvar scrollbarWidth = scrollDiv.offsetWidth
- scrollDiv.clientWidththis.$body[0].removeChild(scrollDiv)return scrollbarWidth
}
【5】jQuery插件定義
在jQuery上定義插件，有點特殊的代碼是options參數的收集和合并，主要收集了3個部分：插件的默認參數DEFAULTS、modal元素上的data-屬性，執行插件時傳入的option對象，這三個部分的優先級依次升高function Plugin(option, _relatedTarget) {//根據選擇器，遍歷所有符合規則的元素
return this.each(function () {
var $this = $(this) //獲取自定義屬性bs.modal的值
var data = $this.data('bs.modal') //將插件的默認參數DEFAULTS、modal元素上的data-屬性，執行插件時傳入的option對象，這三種值合并到一起，作為options參數 //后面的參數的優先級高于前面的參數
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
//如果值不存在，則將Modal實例設置為bs.modal值 if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
//如果option傳遞了string，則表示要執行某個方法
if (typeof option == 'string') data[option](_relatedTarget) else if (options.show) data.show(_relatedTarget)
})
} var old = $.fn.modal //保留其他庫的$.fn.modal代碼(如果定義的話)，以便在noConflict之后可以繼續使用該老代碼
$.fn.modal = Plugin
//重設插件構造器，可以通過該屬性獲取插件的真實類函數
$.fn.modal.Constructor = Modal
【6】防沖突處理$.fn.modal.noConflict = function () {//恢復以前的舊代碼$.fn.modal = old//將$.fn.modal.noConflict()設置為Bootstrap的Modal插件return this
}
【7】綁定觸發事件//監測所有擁有自定義屬性data-toggle="modal"的元素上的單擊事件
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)//獲取href屬性值
var href = $this.attr('href')//獲取data-target屬性值，如果沒有，則獲取href值，該值是所彈出元素的idvar
$target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //如果彈窗元素上已經彈窗實例(即彈出過一次了)，則設置option值為字符串toggle，否則將remote值(如果有的話)、彈窗元素上的自定義屬性值集合、觸發元素上的自定義屬性值集合，合并為option對象var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())//如果是a鏈接，則阻止其默認行為if ($this.is('a')) e.preventDefault()
$target.one('show.bs.modal', function (showEvent) { if (showEvent.isDefaultPrevented()) return
//定義一次hidden事件，給所單擊元素設置focus $target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
})
Plugin.call($target, option, this)
})
}(jQuery);
總結
以上是生活随笔為你收集整理的bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中countif函数_countif与c
- 下一篇： 【Text_classification