マルチモーダルオーバーレイ
オーバーレイは、後ろではなく、最初のモーダルの上に表示される必要があります。
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>私はz-indexの.modal-backdropを変更しようとしました、しかしそれは混乱になります。
場合によっては、同じページに3つ以上のモーダルがあります。
これに対する多くの修正を見たが、どれも私が必要としていたものとまったく同じではなく、 @YermoLamers ＆@Ketwarooに触発されたさらに短いソリューションを思いついた。
背景のz-index修正
このソリューションではsetTimeoutを使用しています。イベント.modal-backdropがトリガーされたときにshow.bs.modalが作成されないためです。
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
- これは、ページ上に作成されたすべての
.modalに対して機能します（動的モードであっても）。 - 背景は即座に前のモーダルを覆います
例jsfiddle
何らかの理由でハードコードされたz-indexが気に入らない場合は、次のように 最も高いz-index を計算できます。
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
return +el.style.zIndex;
})) + 10;
スクロールバー修正
ブラウザの高さを超えるページ上のモーダルがある場合は、2番目のモーダルを閉じるときにスクロールできません。これを修正するには：
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
バージョン
この解決策はブートストラップ3.1.0 - 3.3.5でテストされています
私は答えが受け入れられたことを実感しますが、これを修正するためにブートストラップをハッキングしないことを強くお勧めします。
Shows.bs.modalおよびhidden.bs.modalイベントハンドラをフックし、そこでzインデックスを調整することで、同じ効果を簡単に達成できます。
もう少し詳しい情報は、 こちらから入手できます。
この解決法は任意に深く積み重ねられたモーダルで自動的に機能します。
スクリプトのソースコード：
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(event) {
$(this).removeClass( 'fv-modal-stack' );
$('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
});
$('.modal').on('shown.bs.modal', function (event) {
// keep track of the number of open modals
if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
$('body').data( 'fv_open_modals', 0 );
}
// if the z-index of this modal has been set, ignore.
if ($(this).hasClass('fv-modal-stack')) {
return;
}
$(this).addClass('fv-modal-stack');
$('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
$(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
$('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
$('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack');
});
});
Yermo Lamersの提案を基にした、より短いバージョンですが、これは問題ないようです。フェードイン/フェードアウトやクレイジーバットマン新聞のような基本的なアニメーションでさえも回転します。 http://jsfiddle.net/ketwaroo/mXy3E/
$('.modal').on('show.bs.modal', function(event) {
var idx = $('.modal:visible').length;
$(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
$('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
$('.modal-backdrop').not('.stacked').addClass('stacked');
});
A1rPunの答えとStriplingWarriorの提案を組み合わせると、私はこれを思いついた。
$(document).on({
'show.bs.modal': function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
},
'hidden.bs.modal': function() {
if ($('.modal:visible').length > 0) {
// restore the modal-open class to the body element, so that scrolling works
// properly after de-stacking a modal.
setTimeout(function() {
$(document.body).addClass('modal-open');
}, 0);
}
}
}, '.modal');
事後に追加された動的モーダルに対しても機能し、2番目のスクロールバーの問題を取り除きます。なぜなら、これらは動的モーダルを使用していて、.modalではなくdocumentにイベントをバインドする必要があるからです。モーダル.
ここに掲載されているアイデアの多くを組み込んだBootstrapプラグインを作成しました。
Bootplyのデモ： http://www.bootply.com/cObcYInvpq
Github： https://github.com/jhaygt/bootstrap-multimodal
それはまた、背景がより暗くなる原因となる連続モーダルの問題にも対処しています。これにより、常に1つの背景のみが表示されます。
if(modalIndex > 0)
$('.modal-backdrop').not(':first').addClass('hidden');
目に見える背景のzインデックスは、show.bs.modalイベントとhidden.bs.modalイベントの両方で更新されます。
$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));
解決するとき スタッキングモーダルはメインページが閉じられたときにメインページをスクロールします 私は新しいバージョンのBootstrap（少なくともバージョン3.0.3以降）は必要ないことを知りましたモーダルをスタックするための追加コード.
あなたはあなたのページに（もちろん違うIDを持つ）複数の様相を追加することができます。複数のモーダルを開いたときに見つかった唯一の問題は、1つ閉じたときにボディセレクタのmodal-openクラスが削除されることです。
modal-openを再度追加するには、次のJavascriptコードを使用できます。
$('.modal').on('hidden.bs.modal', function (e) {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
スタックモーダルに背景効果が必要ない場合は、data-backdrop="false"を設定できます。
バージョン3.1.1。固定 モーダルの背景がモーダルのスクロールバーの上に重なるのを修正しました が、上記の解決法は以前のバージョンでもうまくいくようです。
ついに解決しました。私はいろいろな方法でそれをテストし、そしてうまく働きました。
これは同じ問題を抱えている人のための解決策です：Modal.prototype.show関数を変更します（bootstrap.jsまたはmodal.js）。
FROM：
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
TO：
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$backdrop
.css("z-index", (1030 + (10 * $(".modal.fade.in").length)))
that.$element
.css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
それは私が見つけた最善の方法です：開かれているモーダルの数を確認し、モーダルと背景のZインデックスをより高い値に変更します。
起動時にあなたのJSに以下を追加してみてください
$('#myModal2').on('show.bs.modal', function () {
$('#myModal').css('z-index', 1030); })
$('#myModal2').on('hidden.bs.modal', function () {
$('#myModal').css('z-index', 1040); })
説明：
（Chromeの開発ツールを使用して）属性をいろいろ試した後、私はz-indexより下の1031値が背景の後ろに物事を置くことに気付きました。
そのため、ブートストラップのモーダルイベントハンドルを使用して、z-indexを1030に設定します。 #myModal2が表示されている場合は、z-indexが隠されている場合は1040を#myModal2に戻します。
Sys.showModal関数を実行するたびにz-indexが増加し、それを新しいモーダルに設定します。
function system() {
this.modalIndex = 2000;
this.showModal = function (selector) {
this.modalIndex++;
$(selector).modal({
backdrop: 'static',
keyboard: true
});
$(selector).modal('show');
$(selector).css('z-index', this.modalIndex );
}
}
var sys = new system();
sys.showModal('#myModal1');
sys.showModal('#myModal2');
オープン/クローズマルチモーダルに対応
jQuery(function()
{
jQuery(document).on('show.bs.modal', '.modal', function()
{
var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;
jQuery('.modal:visible').each(function()
{
maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
});
jQuery('.modal-backdrop').css('z-index', maxZ);
jQuery(this).css("z-index", maxZ + 1);
jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
});
jQuery(document).on('hidden.bs.modal', '.modal', function ()
{
if (jQuery('.modal:visible').length)
{
jQuery(document.body).addClass('modal-open');
var maxZ = 1040;
jQuery('.modal:visible').each(function()
{
maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
});
jQuery('.modal-backdrop').css('z-index', maxZ-1);
}
});
});
デモ
私のためのこれに対する解決策は私のモーダルdivで "フェード"クラスを使用しないことでした。
各モーダルは異なるIDを与えられ、各リンクは異なるモーダルIDをターゲットとするべきです。だからそれはそのようなものでなければなりません：
<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
Bootstrap 4ソリューションを探しているなら、純粋なCSSを使った簡単なものがあります。
.modal.fade {
background: rgba(0,0,0,0.5);
}
編集：ブートストラップ3.3.4はこの問題（およびその他のモーダル問題）を解決しているので、ブートストラップのCSSとJSを更新できればそれが最善の解決策となるでしょう。あなたが更新できない場合、以下の解決策はまだうまくいくでしょうし、本質的にブートストラップ3.3.4と同じことをします（再計算してパディングを適用します）。
Bass Jobsenが指摘したように、Bootstrapの新しいバージョンではzインデックスが解決されています。モーダルオープンクラスとパディング権は私にとってまだ問題でしたが、Yermo Lamersソリューションに触発されたこのスクリプトはそれを解決します。 JSファイルにドロップしてお楽しみください。
$(document).on('hide.bs.modal', '.modal', function (event) {
var padding_right = 0;
$.each($('.modal'), function(){
if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
padding_right = $(this).modal().data('bs.modal').scrollbarWidth
}
});
$('body').data('padding_right', padding_right + 'px');
});
$(document).on('hidden.bs.modal', '.modal', function (event) {
$('body').data('open_modals', $('body').data('open_modals') - 1);
if($('body').data('open_modals') > 0) {
$('body').addClass('modal-open');
$('body').css('padding-right', $('body').data('padding_right'));
}
});
$(document).on('shown.bs.modal', '.modal', function (event) {
if (typeof($('body').data('open_modals')) == 'undefined') {
$('body').data('open_modals', 0);
}
$('body').data('open_modals', $('body').data('open_modals') + 1);
$('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});
私は似たようなシナリオを持っていました、そして研究開発の少し後に私は解決策を見つけました。私はJSは得意ではありませんが、それでも小さなクエリを書き留めることができました。
http://jsfiddle.net/Sherbrow/ThLYb/
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('.ingredient-item').on('click', function(e){
e.preventDefault();
var content = $(this).find('p').text();
$('.modal-body').html(content);
});
他のソリューションは、私にとってはすぐに機能しませんでした。おそらく、最近のバージョンのBootstrap（3.3.2）を使用しているためだと思います。..オーバーレイが表示されていました上モーダルダイアログ。
コードを少しリファクタリングし、モーダル背景を調整していた部分をコメントアウトしました。これにより問題が修正されました。
var $body = $('body');
var OPEN_MODALS_COUNT = 'fv_open_modals';
var Z_ADJUSTED = 'fv-modal-stack';
var defaultBootstrapModalZindex = 1040;
// keep track of the number of open modals
if ($body.data(OPEN_MODALS_COUNT) === undefined) {
$body.data(OPEN_MODALS_COUNT, 0);
}
$body.on('show.bs.modal', '.modal', function (event)
{
if (!$(this).hasClass(Z_ADJUSTED)) // only if z-index not already set
{
// Increment count & mark as being adjusted
$body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
$(this).addClass(Z_ADJUSTED);
// Set Z-Index
$(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));
//// BackDrop z-index (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
//$('.modal-backdrop').not( '.' + Z_ADJUSTED )
// .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
// .addClass(Z_ADJUSTED);
}
});
$body.on('hidden.bs.modal', '.modal', function (event)
{
// Decrement count & remove adjusted class
$body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
$(this).removeClass(Z_ADJUSTED);
// Fix issue with scrollbar being shown when any modal is hidden
if($body.data(OPEN_MODALS_COUNT) > 0)
$body.addClass('modal-open');
});
補足として、AngularJsでこれを使用する場合は、モジュールの.run（）メソッド内にコードを配置するだけです。
これはnth-of-typeセレクターを使ったCSSのいくつかです。
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
Bootply： http://bootply.com/86973
私の場合、問題は、showイベントが2回処理され、2つのmodal-backdrop divが追加されたbootstrap.jsファイルを含むブラウザ拡張機能によって引き起こされましたが、モーダルを閉じると、そのうちの1つだけが削除されます。
サブツリーの修正ブレークポイントをchromeのbody要素に追加し、modal-backdrop divの追加を追跡することによってそれを見つけました。
特定のモーダルを別の開いているモーダルの上に表示する場合は、最上位のモーダルのHTMLを追加してみてくださいafter他のモーダルdiv。
これは私のために働いた：
<div id="modal-under" class="modal fade" ... />
<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />
2層のモーダルがあることを前提として、CSSのみを使用してスクリプトソリューションを作成しないで、2番目のモーダルをより高いzインデックスに設定します。
.second-modal { z-index: 1070 }
div.modal-backdrop + div.modal-backdrop {
z-index: 1060;
}
時々シーケンスは混乱を引き起こすかもしれません！最初のモーダルを書いてから2番目のモーダルを書く
残念ながら、私はコメントする評判はありませんが、1040のz-indexのハードコードされたベースラインを持つ一般的な解決策は、ページにレンダリングされる最大zIndexを見つけようとするzIndex計算より優れているようです。
一部の拡張機能やプラグインはトップレベルのDOMコンテンツに依存しているため、.Maxの計算が非常に厄介なほど大きくなり、zIndexをこれ以上増やすことはできません。これにより、モーダルの上にオーバーレイが誤って表示されるモーダルになります（Firebug/Google Inspectorツールを使用している場合は、zIndexが2 ^ n - 1のオーダーで表示されます）。
私は、さまざまな形式のMath.Max for z-Indexがこのシナリオの原因となっている特定の理由を特定することはできませんでしたが、それは起こりうることであり、少数のユーザーには独特のことです。 （私のブラウザスタックの一般的なテストでは、このコードは完全に機能していました）。
これが誰かに役立つことを願っています。
Modal.jsにグローバル変数を追加
var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data
//追加変数内に関数を表示 - Modal.prototype.backdrop
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"
that.$element
.show()
.scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+
this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass
$(window).scroll(function(){
if($('.modal.in').length && !$('body').hasClass('modal-open'))
{
$('body').addClass('modal-open');
}
});
これをチェックしてください。この解決策は私にとっては問題を解決しました。単純なCSSの行はほとんどありませんでした。
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
ここに私がそれを見つけた場所へのリンクは以下のとおりです。 Bootply トップに表示する必要がある.modualがHTMLコードの2番目であることを確認してください。 「偶数」としてそれを見つけることができます。
私にとっては、これらの単純なscssルールは完璧に機能しました。
.modal.show{
z-index: 1041;
~ .modal.show{
z-index: 1043;
}
}
.modal-backdrop.show {
z-index: 1040;
+ .modal-backdrop.show{
z-index: 1042;
}
}
これらの規則があなたのケースで間違った様相を上にするようにするならば、あなたの様相divの順序を変えるか、または上記のscssで（奇数）を（偶数）に変更してください。
試してください http://nakupanda.github.io/bootstrap3-dialog/#opening-multiple-dialogs
それはあなたの問題を簡単に解決するはずです。
更新日：22.01.2019、13.41私はjhayによって解決策を最適化しました。これは、例えばある詳細データから別の詳細データへ前後に移動するときに同じまたは異なるダイアログを閉じたり開いたりすることもサポートします。
(function ($, window) {
'use strict';
var MultiModal = function (element) {
this.$element = $(element);
this.modalIndex = 0;
};
MultiModal.BASE_ZINDEX = 1040;
/* Max index number. When reached just collate the zIndexes */
MultiModal.MAX_INDEX = 5;
MultiModal.prototype.show = function (target) {
var that = this;
var $target = $(target);
// Bootstrap triggers the show event at the beginning of the show function and before
// the modal backdrop element has been created. The timeout here allows the modal
// show function to complete, after which the modal backdrop will have been created
// and appended to the DOM.
// we only want one backdrop; hide any extras
setTimeout(function () {
/* Count the number of triggered modal dialogs */
that.modalIndex++;
if (that.modalIndex >= MultiModal.MAX_INDEX) {
/* Collate the zIndexes of every open modal dialog according to its order */
that.collateZIndex();
}
/* Modify the zIndex */
$target.css('z-index', MultiModal.BASE_ZINDEX + (that.modalIndex * 20) + 10);
/* we only want one backdrop; hide any extras */
if (that.modalIndex > 1)
$('.modal-backdrop').not(':first').addClass('hidden');
that.adjustBackdrop();
});
};
MultiModal.prototype.hidden = function (target) {
this.modalIndex--;
this.adjustBackdrop();
if ($('.modal.in').length === 1) {
/* Reset the index to 1 when only one modal dialog is open */
this.modalIndex = 1;
$('.modal.in').css('z-index', MultiModal.BASE_ZINDEX + 10);
var $modalBackdrop = $('.modal-backdrop:first');
$modalBackdrop.removeClass('hidden');
$modalBackdrop.css('z-index', MultiModal.BASE_ZINDEX);
}
};
MultiModal.prototype.adjustBackdrop = function () {
$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (this.modalIndex * 20));
};
MultiModal.prototype.collateZIndex = function () {
var index = 1;
var $modals = $('.modal.in').toArray();
$modals.sort(function(x, y)
{
return (Number(x.style.zIndex) - Number(y.style.zIndex));
});
for (i = 0; i < $modals.length; i++)
{
$($modals[i]).css('z-index', MultiModal.BASE_ZINDEX + (index * 20) + 10);
index++;
};
this.modalIndex = index;
this.adjustBackdrop();
};
function Plugin(method, target) {
return this.each(function () {
var $this = $(this);
var data = $this.data('multi-modal-plugin');
if (!data)
$this.data('multi-modal-plugin', (data = new MultiModal(this)));
if (method)
data[method](target);
});
}
$.fn.multiModal = Plugin;
$.fn.multiModal.Constructor = MultiModal;
$(document).on('show.bs.modal', function (e) {
$(document).multiModal('show', e.target);
});
$(document).on('hidden.bs.modal', function (e) {
$(document).multiModal('hidden', e.target);
});}(jQuery, window));