10

一部のデータを設定または表示するために、2 つ目のモーダルを開く必要があるモーダル フォームがあります。最初と 2 番目のモーダルを正常に起動できますが、「トップ」モーダルを閉じると、両方のモーダルが非表示になります。一度に 1 つのモーダルを非表示にすることは可能ですか?

モーダルワンを表示:

$('#content').on('click', "a#AddItemModal", function () {
    var id = $(this).attr('value');

    var val = '/AddItems/id:' + id;

    $('#addItemBody').load(val);
    $('#addItemModal').modal({});

});

モーダル 1:

<div class="modal fade hide" id="addItemModal" tabindex="-1" role="dialog">
    <div class="modal-body">
        <p id="addItemBody"></p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn"  data-dismiss="modal" id="good">Close</a>
    </div>
</div>

モーダル 2 を表示:

$('#test_embed').click(function () {
        var val = $('#formEmbed').val();
        $('#myModalLabel').html('Embed Preview');
        $('#embedBody').html(val);
        $('#embedModal').modal({});
    });

モーダル 2:

<div class="modal fade hide" id="embedModal" tabindex="-1" role="dialog">
    <div class="modal-header">
        <h3 id="myModalLabel">Embed Preview</h3>
    </div>
    <div class="modal-body">
        <p id="embedBody"></p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
</div>
4

4 に答える 4

14

私は通常、2 番目のモーダルが親モーダル内の子モーダルでないことを確認します。data-dismiss="modal"は現在のモーダルとすべての親モーダルを閉じるためです。

可能であればそれを作る：

<div class="modal fade" id="Model1" tabindex="-1" role="dialog">
</div>
<div class="modal fade" id="Model2" tabindex="-1" role="dialog">
</div>

いいえ

<div class="modal fade" id="Model1" tabindex="-1" role="dialog">
   <div class="modal fade" id="Model2" tabindex="-1" role="dialog">
   </div>
</div>

または、モーダルを閉じるために使用したいリンクやボタンなどに「閉じる」クラスを削除しdata-dismiss="modal"て割り当て、1 つの jquery イベントを使用して、閉じるボタンのモーダルだけを閉じたり非表示にしたりできます。

 $('#mycontainer').on('click', '.modal .close', function () {
        $(this).closest('.modal').modal('hide');
    });
于 2016-05-13T09:22:38.377 に答える
12

閉じるボタンをクリックすると、すべてのモーダルを非表示にする「閉じる」イベントが発生するため、モーダルを手動で閉じる必要があると思います。モーダルを手動で閉じるには$('#addItemModal').modal('hide');、最初のモーダルと を呼び出します$('#embedModal').modal('hide');。

これで、モーダルにこれらを呼び出すボタンを配置できます。

モーダル 1:

<div class="modal fade hide" id="addItemModal" tabindex="-1" role="dialog">
    ...
    <div class="modal-footer">
        <a href="#" class="btn"  data-number="1" id="good">Close</a>
    </div>
</div>

モーダル 2:

<div class="modal fade hide" id="embedModal" tabindex="-1" role="dialog">
    ...
    <div class="modal-footer">
        <button class="btn" data-number="2">Close</button>
    </div>
</div>

Javascript:

$("button[data-number=1]").click(function(){
    $('#addItemModal').modal('hide');
});

$("button[data-number=2]").click(function(){
    $('#embedModal').modal('hide');
});
于 2013-07-29T21:04:33.727 に答える
0

モーダルをボディに追加するだけです-モーダルが作成された後

$('body').append('#addItemModal');

現在、アクティブなトップモーダルのみが閉じられます

于 2015-12-31T01:01:52.860 に答える