bootstrap實現多模態框的方法
阿新 • • 發佈：2019-02-12
前言
最近在專案中使用bootstrap模態框的時候發現了一個問題，那就是bootstrap模態框不支援多模態框，即不支援彈出了一個模態框之後，再彈出第二個模態框，只支援彈出一個模態框，雖然說第二個或更多模態框可以正常彈出，但是會出現問題，這裡就兩個我發現的問題來分享給大家：
首先來看一下正常一個模態框彈出的樣子：
問題一：
當彈出多個模態框背景遮罩增多，導致背景的顏色越來越深，如下圖：
問題二：
再一個問題就是，當前頁面的內容出現了滾動條，並且前一個模態框內容過長也出現滾動條，開啟第二個或多個模態框時，關閉一個模態框時出現，如圖所示：
然後點選彈出第三個模態框按鈕，再將其關閉 ，出現問題，當滾動滾動條的時候，是主頁面在滾動，而不是前一個模態框即第二個模態框。如圖所示：
解決這個問題需要重寫覆蓋模態框原型hideModal的方法，程式碼如下：
//覆蓋Modal.prototype的hideModal方法
$.fn.modal.Constructor.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () { 完美解決問題，最後附上整個測試的程式碼，以供大家參考：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css"/>
<style>
#container{
height:1000px;
background:#ccc;
}
</style>
</head>
<body>
<div id="container">
<span>這是一個很長的div,使頁面出現滾動條。</span>
<h2>使用Bootstrap建立多模態框</h2>
<div id="example1" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>這是第一個模態框</h3>
</div>
<div class="modal-body">
<h4>第一個模態框中的文字</h4>
<p>你可以在這新增一些文字。</p>
</div>
<div class="modal-footer">
<a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">彈出第二個模態框</a>
<a href="#" class="btn" data-dismiss="modal">關閉</a>
</div>
</div>
</div>
</div>
<div id="example2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>這是第二個模態框</h3>
</div>
<div class="modal-body">
<h4>第二個模態框中的文字</h4>
<p style="height:900px">你可以在這新增一些文字。</p>
</div>
<div class="modal-footer">
<a data-toggle="modal" href="#example3" class="btn btn-primary btn-large">彈出第三個模態框</a>
<a href="#" class="btn" data-dismiss="modal">關閉</a>
</div>
</div>
</div>
</div>
<div id="example3" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>這是第三個模態框</h3>
</div>
<div class="modal-body">
<h4>第三個模態框中的文字</h4>
<p>你可以在這新增一些文字。</p>
</div>
<div class="modal-footer">
<!--<a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">發動演示模態框</a>-->
<a href="#" class="btn" data-dismiss="modal">關閉</a>
</div>
</div>
</div>
</div>
<p><a data-toggle="modal" href="#example1" class="btn btn-primary btn-large">發動演示模態框</a></p>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script>
jQuery(function($){
//解決模態框背景色越來越深的問題
$(document).on('show.bs.modal', '.modal', function(event) {
$(this).appendTo($('body'));
}).on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
});
function setModalsAndBackdropsOrder() {
var modalZIndex = 1040;
$('.modal.in').each(function(index) {
var $modal = $(this);
modalZIndex++;
$modal.css('zIndex', modalZIndex);
$modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
$('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}
//覆蓋Modal.prototype的hideModal方法
$.fn.modal.Constructor.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () {
//判斷當前頁面所有的模態框都已經隱藏了之後body移除.modal-open，即body出現滾動條。
$('.modal.fade.in').length === 0 && that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}
});
</script>
</body>
</html>