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

问题描述

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

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>

推荐答案

我认为您应该手动关闭Modal，因为当您单击关闭按钮时，会触发一个"close"事件，该事件会隐藏所有模态.要手动关闭模态，请调用$('#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屋！