bootstrapを複数モーダル対応にする

概要

入り組んだbootstrapのmodalでも複数表示したかった

動作環境

jquery-3.3.1.min.js
GoogleChorome 68.0.3440.106（Official Build） （64 ビット）

参考

Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

やったこと

bootstrapで複数表示するmodalを作っていたのですが、bootboxとかでloadingを作っていたせいか、はたまた共通テンプレートに非表示modalを3つも4つも詰め込んでいたせいか、たまに.modal-backdropの影がモーダルの下に回り込まないことがあったのでつまづいてしまいました。
どれだけmodalがあっても影は下に回り込んでほしいと思った結果、setIntervalで延々とチェックするという力技にしてようやくすべてのmodal表示時にすぐ下に影がつくようになりました。
なんか24時間位かかった。
もっといい方法あるんだろうと思うのですが今回はこれでなんとか…。

$(function($){
	// モーダルを常に監視してz-indexを設定する
	var setModalZindex = setInterval(function() {
		// Bootstrap3モーダル要素CSS:z-index初期値を設定
		var defaultZindexValOfOverlay = 1040;
		var defaultZindexValOfModal = 1050;

		// イベント編集に関わるモーダル要素を取得
		var overlay     = document.querySelectorAll('.modal-backdrop');
		var modalWindow = $( '.modal:visible' );
		// console.log(overlay);
		// console.log(modalWindow);

		// modalが一枚以上あればz-index再設定する
		if(modalWindow.length > 0){
			for (var i = 0; i < modalWindow.length; i++) {
				var addValue = i == 0 ? 0 : 10 * (1 + i);
				var overlayZinde = defaultZindexValOfOverlay + addValue;
				var modalZinde = defaultZindexValOfModal + addValue;

				// 要素の増減有無に応じたz-indexの設定をする必要がある
				if (i < overlay.length) {
					// 既存のオーバーレイのz-indexが設定したい値と違う場合は設定
					if( overlay[i].style.zIndex != overlayZinde ){
						overlay[i].style.zIndex = overlayZinde;
						// console.log(overlayZinde);
					}
				}
				if (modalWindow[i].classList.contains('in')) {
					// 既存のモーダルのz-indexが設定したい値と違う場合は設定
					if(modalWindow[i].style.zIndex != modalZinde){
						modalWindow[i].style.zIndex = modalZinde;
						// console.log(modalZinde);
					}
				}
			}
		}

	}, 200);
});

おわり