1
私は、他のレコードへのマッピングを使用して多数のデータレコードを作成する必要があるWebアプリケーション（Asp.Net MVC 5）で作業しています。ユーザーは、既存または新しく作成されたレコードへのマッピングを作成できる必要があります。ブートストラップ3つのネストされたモーダル - 背景のZ-インデックスとクローズモーダル（クリック時）
典型的なケースでは、アドレスの作成次のようになります。
- ユーザーは、彼は彼のことが可能
- 通りと通りのような通常のフィールドがないなどを入力するアドレス
- を作成するために、サイトを開きます
- 必要な都市がまだ存在しない場合、新しい都市を作成することができます
- ...都市のために、彼は都市を選択することができます（アドレスと都市と同じ）
選択はブートストラップモーダルを使用して実装されます。 選択ボタン（Select都市など）を押すと、表内の選択可能なすべてのレコードを示す表を含むモーダルが表示されます。 テーブルのモーダルには、新しいエンティティを追加するための新規追加ボタンがあり、別のモーダルを開きます。
は、私はこのような部分的なビューでコードを分割しましたビューを再利用できるようにするには：
- _CreateAddress =>は_CreateAddressを含む
- _CreateAddressModal =>モーダルアドレスを作成するだけのフォームが含まれています
_SelectAddressModal =>すべてのアドレスを表示するテーブルを含むモーダルです。モーダルをユーザーがクリックすると新しいボタンを追加するときに表示されるも_CreateAddressModalが含まれてい
_CreateCity =>は、市内に作成するだけで、フォームが含まれてい
- _CreateCityModal => _CreateAddressModalを含むモーダル
- _SelectCityModal = >すべての都市を表示する表を含むモーダル。モーダルは、新しいボタンを追加
の際にユーザーがクリック表示されます_CreateCityModal含まれています...ので、
に私は2つの問題ました：背景をクリック
- を開いたモーダルを閉じない
- 最上位のモーダルの背景が他のすべてのモーダルよりも低いz-インデックスを持ち、したがって他のモーダルを隠さない
モーダルショーでバックドロップのZ-インデックスを設定しようとしましたが、他のモーダルを非表示にしていますが、これは動作しませんでした=>バックドロップは現在のモーダル上に表示されます。ここで
は、問題を示すフィドルです：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