Question

我有一个模态形式，有时需要打开第二个模态来设置或显示一些数据。我能够启动第一个和第二个模态OK，但是当我关闭'top'模态时，两个模态都被隐藏了。是否可以一次隐藏一个模态？

显示模态一：

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

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

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

});

模态一：

<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>

显示模式二：

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

模式二：

<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>

Answer 1

我通常会确保第二个模态不是父模型中的子模态。因为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"并指定课程＆＃34;关闭＆＃34;例如，对于我想用来关闭模态的链接或按钮，然后使用一个jquery事件，我可以关闭/隐藏关闭按钮模式。

 $('#mycontainer').on('click', '.modal .close', function () {
        $(this).closest('.modal').modal('hide');
    });

Answer 2

我认为您应该手动关闭模态，因为当您单击关闭按钮时，您会触发隐藏所有模态的“关闭”事件。要手动关闭模态，请为第一个模态和$('#addItemModal').modal('hide');调用$('#embedModal').modal('hide');。

现在你可以在你的模态中放一个按钮来调用它们：

模态一：

<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>

模式二：

<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');
});

Answer 3

只需将你的模态附加到正文 - 模态创建后

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

现在只关闭活跃的顶级模态

jQuery Bootstrap多个模态，如何隐藏active / top模态

3 个答案: