jQuery Bootstrap 多个模态，如何仅隐藏活动/顶部模态 [英] jQuery Bootstrap multiple modals, how to hide active/top modal only

问题描述

我有一个模态表单，有时需要打开第二个模态来设置或显示一些数据.我可以启动第一个和第二个模态，但是当我关闭顶部"模态时，两个模态都被隐藏了.是否可以一次隐藏一个模式?

I've got a modal form that sometimes requires a second modal to be opened to set or display some data. I'm able to launch the first and second modals OK, but when I close the 'top' modal, both modals are hidden. Is it possible to hide one modal at a time?

显示模式一:

$('#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>

推荐答案

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

I think you should manually close the Modal because when you click on the close button you fire a "close" event which hide all the modal. To manually close a modal, call $('#addItemModal').modal('hide');for the first modal and $('#embedModal').modal('hide');.

现在您可以在模态中放置一个按钮来调用这些:

Now you can put a button in your modal that call these:

模态一:

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

Javascript:

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

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

这篇关于jQuery Bootstrap 多个模态，如何仅隐藏活动/顶部模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！