jQuery Bootstrap 多个模态，如何仅隐藏活动/顶部模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17933424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Bootstrap multiple modals, how to hide active/top modal only
提问by richj
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?
我有一个模态表单，有时需要打开第二个模态来设置或显示一些数据。我可以启动第一个和第二个模态，但是当我关闭“顶部”模态时，两个模态都被隐藏了。是否可以一次隐藏一个模式？
Show Modal One:
显示模式一：
$('#content').on('click', "a#AddItemModal", function () {
var id = $(this).attr('value');
var val = '/AddItems/id:' + id;
$('#addItemBody').load(val);
$('#addItemModal').modal({});
});
Modal One:
模态一：
<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>
Show Modal Two:
显示模式二：
$('#test_embed').click(function () {
var val = $('#formEmbed').val();
$('#myModalLabel').html('Embed Preview');
$('#embedBody').html(val);
$('#embedModal').modal({});
});
Modal Two:
模态二：
<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>
回答by Elie Génard
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');.
我认为您应该手动关闭模态，因为当您单击关闭按钮时，您会触发一个隐藏所有模态的“关闭”事件。要手动关闭模态，请调用$('#addItemModal').modal('hide');第一个模态和$('#embedModal').modal('hide');。
Now you can put a button in your modal that call these:
现在你可以在你的模态中放置一个按钮来调用这些：
Modal One:
模态一：
<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>
Modal Two:
模态二：
<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');
});
回答by Amr Elgarhy
I usually make sure that the second modal is not a child modal inside the parent one.
Because the data-dismiss="modal"closes the current modal and all parent modals.
我通常确保第二个模态不是父模态内的子模态。因为data-dismiss="modal"关闭了当前模态和所有父模态。
so make if possible make it:
所以如果可能的话，让它：
<div class="modal fade" id="Model1" tabindex="-1" role="dialog">
</div>
<div class="modal fade" id="Model2" tabindex="-1" role="dialog">
</div>
Not
不是
<div class="modal fade" id="Model1" tabindex="-1" role="dialog">
<div class="modal fade" id="Model2" tabindex="-1" role="dialog">
</div>
</div>
Or I remove the data-dismiss="modal"and assign class "close" for example for the link or button i want to use to close modals then using one jquery event I can close/hide just the close button modal.
或者我删除data-dismiss="modal"并分配类“关闭”，例如我想用来关闭模式的链接或按钮，然后使用一个 jquery 事件我可以关闭/隐藏关闭按钮模式。
$('#mycontainer').on('click', '.modal .close', function () {
$(this).closest('.modal').modal('hide');
});
回答by Ivan
just append your modal to body - after modal created
只需将您的模态附加到正文 - 在模态创建之后
$('body').append('#addItemModal');
$('body').append('#addItemModal');
now will closed only active top modal
现在将只关闭活动的顶部模态
