0

プロジェクトで Twitter Boostrap フレームワークを使用しています。現在、2 つのモーダル ウィンドウを同時に使用すると問題が発生します。

コードは次のようになります。

<div id="modal-dataset" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">x</a>
            <h3>First</h3>
        </div>

        <div class="modal-body" id="modal-dataset-body">
                <div id="data-preview-buttons">
                    <button id="load_case" class="btn btn-primary" onclick="return loadNoteOrDataset();">Load second</button>
                </div>
        </div>


<div id="modal-dataset-preview" class="modal hide fade in" style="display: none">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">x</a>
            <h3>Second</h3>

            <div class="modal-body" id="modal-dataset-preview-body">
                    Any text
            </div>
        </div>

関数 loadNoteOrDataset() では、次を使用します。

$('#modal-dataset-preview').modal('show');

何が問題ですか？最初のモーダルウィンドウが表示され、すべて問題ありませんが、ボタンと「表示」を使用して2番目のウィンドウを呼び出したい場合、最初のウィンドウの下に表示されるため、その内容を見ることができません。

モーダルウィンドウのある種の「スタック」を構築したい - 新しいウィンドウは呼び出し後に表示され、閉じられたときに表示されるべきである - 前のウィンドウが表示されるべきである. どのウィンドウを前面に表示するかを設定する方法はありますか?

4

1 に答える 1

0

z-indexモーダル ウィンドウごとに異なる値を定義できます。

$('#modal-dataset-preview').css('z-index', <value>).modal('show');

z-indexMDN リファレンスはこちら。

于 2013-09-17T13:02:13.007 に答える