/ /積み重ねモーダルを切り替える - jquery、twitter-bootstrap、bootstrap-modal

スタックされたモーダル間の切り替え - jquery、twitter-bootstrap、bootstrap-modal

私は現在、画面上にいくつかの積み重ねモーダルを開いています。基本を作成しました JSFiddle このため。

それらは積み重ねられます:

#myModal{
top: 0% ;
}
#myModal2{
top: 5% ;
}
#myModal3{
top: 10% ;
}
#myModal4{
top: 15% ;
}

私が欲しいのは、の間でクリックできるようになることですオープンモーダル例えば。 4つすべてが起動したら、モーダル1の表示部分をクリックして、モーダル1が前面に来るようにします。あるいは(もしそうならないなら)、モーダル1を前面に持ってくることができるボタンが欲しいのです。

これまでのところ、私はこれを可能にするものをブートストラップに見つけることができません。

回答:

回答№1は1

これを試してみることはできませんでしたが、classを持つすべての要素に対してclickイベントを作成する必要があります。 .modal-dialog そしてイベントハンドラ内でのすべての要素を設定します。 .modal あるz-indexを持ち、それからクリックされたもののモーダルを設定する this より高いz-indexになります。

何かのようなもの:

$(".modal-dialog").click (function() {
var modalSelected = $(this).parent();
$(".modal").each(function() {
var idx = $(this).length;
$(this).css("z-index", 1040 + (10 * idx));
});
modalSelected.css("z-index",1500);
});

あなたが持っているかもしれない問題は1つの大きいモーダルが完全に他のすべてのモーダルダイアログを覆い隠すかもしれないということです。おそらく考えましたか 代わりにタブを使う