プロジェクトにbootstrapダイアログを実装しました。そのダイアログにいくつかの削除機能があり、削除確認メッセージが別のbootstrapダイアログを開きます。確認ダイアログが開き、最初のダイアログは無効にならず、すべてのイベントが機能します。
別のダイアログが開いたときに元のダイアログを無効にする解決策はありますか?
ここに私のコードがあります:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
content: content,
buttons: [{
label: 'Save',
cssClass: 'btn-primary',
id: 'btnSave',
onclick: function (dialog) {
}
},
{
label: 'Close',
cssClass: 'btn',
id: 'btnClose',
onclick: function (dialog) {
if (callback != "") {
callback(true);
}
dialog.close();
}
}]
});
dlg.open();`
}
削除確認のダイアログが開いたら、最初のダイアログを無効にします。
Web開発におけるモーダルダイアログの複雑さを理解するには、 z-indexプロパティとスタックコンテキスト についてもう少し理解する必要があります。
要するに、ダイアログは2つの主要コンポーネントをDOMに追加することによって機能します。画面全体を占める背景と、ダイアログを構成するdivです。これらはそれぞれDOMのルートレベルに置かれ、_z-index
_プロパティに高い値が与えられるため、ページの残りの部分から際立っています。 どのくらいですか?空白のモーダルを空白のページに追加すると、次のDOM要素が表示されます。
<div class = "modal-backdrop fade in"> </ div> <!- z-index:1030; -> <div class = "modal bootstrap-dialog"> <!- z-index:1040; -> <div class = "modal-dialog"> <!- z-index:1050; ->
_modal-backdrop
_は、真のモーダルプロセスのように見えます。これは、他のコンテンツよりも上にレンダリングされるため、クリックが下のどこでも発生しないようにするためです。 _modal-dialog
_がクリックを受け取ることができる唯一の理由は、より高いz-indexを提供することにより、背景のon topが積み重ねられているためです。
それだけです!これがトリックの袋です。 bootstrap 複数のダイアログの使用に対する注意 の場合、スタックがトリッキーになるのでそうします。別の要素を追加すると、同じ_z-index
_は、通常のページコンテンツの上にあるが、元のダイアログと同じ平面上にあることを意味します。元のダイアログを完全にカバーしていない場合は、その上に背景がないため、元のボタンをクリックできます。
これを解決するには、バックグラウンドモーダルのクリックを無効にする独自の方法を考え出す必要があります。この問題は解決されたようです(部分的に)。次の例を参照してください。
Bootstrap Dialogは、ダイアログの外をクリックすると、DOMの最後のダイアログを単純に閉じ、イベントを処理済みとしてマークし、他のイベントを発生させないようにしました。 2番目のモーダルが起動しているときにクリックすると、発生するのは2番目のモーダルだけです。
2番目のモーダルをlookにしたい場合は、最初のモーダルと同じように、手動で行う必要があります。
新しいモーダルが作成されると、独自の_modal-backdrop
_が付属します。 2番目のモーダルが表示されている場合、最初のモーダルに対してz-indexをインクリメントすることにより、元のモーダルを表示できます。 onshown
イベントでは、現在のモーダルとそのオーバーレイを取得し、_.CSS
_メソッドを使用してz-indexを変更するだけです。これを既存のモーダルの上に表示するため、最初にDOMのモーダルの数($('.bootstrap-dialog').length
)をカウントし、次にz-indexをインクリメントして、次に高いダイアログよりも高くします。
_function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
message: content,
onshown: function(dialog) {
var tier = $('.bootstrap-dialog').length - 1;
dialog.$modal.prev(".modal-backdrop")
.css("z-index", 1030 + tier * 30);
dialog.$modal
.css("z-index", 1040 + tier * 30);
}
// More Settings
}).open();
}
_
概念実証として、他のダイアログの上にダイアログを継続的に追加できるデモがあります
これは技術的には実現可能ですが、 モーダル内のモーダルは紛らわしいUXを作成する可能性があります ですので、問題が発生した場合の正しい答えは、元のワークフローを採用し、 URLと状態を含むページ全体のデザイン。
最初にクラスをプライマリモーダルsoに追加します:<div class="modal-content kk">
私は単に使用します:
$('#myModal1').on('shown.bs.modal', function () {
$('.kk').addClass('magla');
$('#myModal').modal('hide');
});
$('#myModal1').on('hidden.bs.modal', function () {
$('.kk').removeClass('magla');
$('#myModal').modal('show');
});
.magla cssは次のとおりです。
.magla {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
よさそうだ。
私の謙虚な解決策:新しいモーダルごとに新しいIDを生成します。次に、1つの変数ですべてを管理します。それは私の目的のために働いています、ところで。
var _MODAL_LAST;
$( document ).on( 'show.bs.modal' , '.modal' , function(){
_MODAL_LAST = $(this);
});
$( document ).on( 'hide.bs.modal' , '.modal' , function(){
if( _MODAL_LAST.attr('id') !== $(this).attr('id') ){
return false;
}else{
_MODAL_LAST = $(this).prevAll('.modal:first');
}
});
Onclickメソッドを使用して実際のモーダルを非表示にするだけです
<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$('#actual-modal-id').modal('hide');">
Text Button
</button>