问题描述
我有一个模态表单,有时需要打开第二个模态来设置或显示一些数据.我可以启动第一个和第二个模态,但是当我关闭顶部"模态时,两个模态都被隐藏了.是否可以一次隐藏一个模式?
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 多个模态,如何仅隐藏活动/顶部模态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!