1
我正在開發一個Web應用程序（Asp.Net MVC 5），其中用戶必須使用映射到其他記錄來創建許多數據記錄。用戶必須能夠創建到現有或新創建記錄的映射。Bootstrap 3嵌套模態 - 背景z-index並點擊關閉模態
一個典型的例子是一個地址的創建：
- 用戶打開該網站創建地址
- 他進入像街道和街道等不正常領域
- 他能從表中選擇現有的城市（地址所在的城市）
- 如果所需的城市不存在，他可以創建一個新城市
- ...對於城市，他可以選擇一個國家或創建地址（與地址和城市相同）
該選擇是使用引導模式實現的。 按下選擇按鈕（如選擇城市）顯示一個模式，其中包含一個表格，顯示錶格中的所有可選記錄。 與表格中的模式包含添加新按鈕以添加新實體，從而打開另一個模式。
爲了能夠重新使用我已經分裂在局部視圖中這樣的代碼的觀點：
- _CreateAddress =>只包含的形式來創建地址
- _CreateAddressModal =>將含有_CreateAddress模態
_SelectAddressModal =>一個模態，其中包含一個顯示所有地址的表格。模態還包含_CreateAddressModal當用戶點擊了添加新的按鈕將被顯示
_CreateCity =>只包含的形式來創建一個城市
- _CreateCityModal =>將含有_CreateAddressModal模態
- _SelectCityModal = >包含一張表格顯示所有城市的模式。該模式還包含_CreateCityModal當用戶點擊新建按鈕
這將顯示...等等
我有兩個問題：
- 點擊背景不關閉打開的模態
- 最高模態的背景比所有其他模態具有更低的Z-index，因此不會隱藏其他模態
我試着在模態顯示中設置背景的z-index，以確保它們隱藏了其他模態，但是這沒有奏效=>背景顯示在當前模態之上。
下面是該問題的一個小提琴：jsFiffle
SO並不讓我鏈接到的jsfiddle不添加代碼的問題，所以這裏是代碼：
HTML：
<!-- Create Address -->
<div id="CreateAddress" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create Address</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create an address
<button class="btn btn-default" id="selectCityButton">select city</button>
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateAddress">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Select City -->
<div id="SelectCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select a City</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is a table to select an existing city
</div>
<button class="btn btn-success btn-block" id="createCityButton">Create new city</button>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="SelectCity">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Create City -->
<div id="CreateCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create City</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create a city
<button class="btn btn-default" id="selectCountryButton">select country of city</button>
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateCity">Cancel</button>
<!-- Select Country -->
<div id="SelectCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select a Country</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is a table to select an existing country
</div>
<button class="btn btn-success btn-block" id="createCountryButton">Create new country</button>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="SelectCountry">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Select Country END -->
<!-- Create Country -->
<div id="CreateCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create Country</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<strong>Placeholder</strong> Here is the form to create a country
</div>
<button class="btn btn-primary">OK (not implemented)</button>
<button class="btn btn-default modalCloseButton"
data-modalid="CreateCountry">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Create Country END -->
</div>
</div>
</div>
</div>
<button class="btn btn-primary btn-block" id="openModal">Open Modal</button>
JS：
var zIndex = 10000;
// Displys the given modal on top of everything else
// modal: The modal to display as jQuery object
// Does not work => remove thw first two lines to see the problem
function displayModalOnTop(modal) {
// remove me
modal.modal('show');
return;
// end remove
zIndex += 2;
modal.css('z-index', zIndex);
modal.modal('show');
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
}
$(function(){
$('#openModal').on('click', function(){
displayModalOnTop($('#CreateAddress'));
});
// generic close modal handler
$('.modalCloseButton').on('click', function(){
var $this = $(this);
var modalId = $this.attr('data-modalid');
$('#' + modalId).modal('hide');
})
// Select city click
$('#selectCityButton').on('click', function(){
displayModalOnTop($('#SelectCity'));
});
// Create city click
$('#createCityButton').on('click', function(){
displayModalOnTop($('#CreateCity'));
});
// Select country click
$('#selectCountryButton').on('click', function(){
displayModalOnTop($('#SelectCountry'));
});
// Create country click
$('#createCountryButton').on('click', function(){
displayModalOnTop($('#CreateCountry'));
});
});
CSS：
.modal.fullScreen {
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 48px;
}
.modal.fullScreen .modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
.modal.fullScreen .modal-body.noPadding {
padding: 0;
}
.modal.fullScreen .modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal.fullScreen .modal-header {
background-color: #3276b1;
color: #fff;
}
.modal.fullScreen .modal-header .close {
color: #FFF;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
font-size: 30px;
}
.modal.fullScreen .modal-header .close:hover {
opacity: 1 !important;
}
感謝您的回答。實際上，我不用手寫這些代碼，代碼是由服務器端代碼生成的。 – musium