Twitter bootstrap 3 在打开新模态之前，引导关闭所有打开的模态
我有一种情况，我使用了许多模态（用于登录表单、注册表单、通行证检索表单等）。发生的情况是，如果用户单击“登录”，然后单击“注册”，他们将得到两个模态。我想引导自动关闭所有打开的模态，然后再打开一个新模态。理想情况下，也可以等待动画 有人做过什么吗？我有以下解决方案，但每次都需要针对函数Twitter bootstrap 3 在打开新模态之前，引导关闭所有打开的模态,twitter-bootstrap-3,Twitter Bootstrap 3,我有一种情况，我使用了许多模态（用于登录表单、注册表单、通行证检索表单等）。发生的情况是，如果用户单击“登录”，然后单击“注册”，他们将得到两个模态。我想引导自动关闭所有打开的模态，然后再打开一个新模态。理想情况下，也可以等待动画 有人做过什么吗？我有以下解决方案，但每次都需要针对函数 function close_modal() { $('.modal').modal('hide') } 如何将其绑定到打开的每个模式 根据Bootstrap的网站，我正在使用Bootstrap v3.
function close_modal() {
$('.modal').modal('hide')
}
根据Bootstrap的网站，我正在使用Bootstrap v3.3.4 不支持多个打开模态 确保在另一个模态仍然可见时不要打开该模态。一次显示多个模态需要自定义代码 我尝试使用javascript同时打开多个模态，这导致第二个模态不响应诸如单击之类的事件 因此，如果您只需单击网页，您将不会同时显示两个多模态 这是链接 ================此处编辑=============== 你可以试试这个
$('.modal').on('show.bs.modal', function () {
$('.modal').not($(this)).each(function () {
$(this).modal('hide');
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="modal fade" id="modal_1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Title1</h4>
</div>
<div class="modal-body">
<p>Body1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="launchSecond">Second</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Title2</h4>
</div>
<div class="modal-body">
<p>Body2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="launchFirst">First</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5">
<button type="button" class="btn btn-success" id="launchModalBtn">Launch Modal</button>
</div>
</div>
</div>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).on('click','#launchModalBtn',function () {
$('#modal_1').modal();
});
$(document).on('click', '#launchSecond', function () {
$('#modal_2').modal();
})
$(document).on('click', '#launchFirst', function () {
$('#modal_1').modal();
})
$('.modal').on('show.bs.modal', function () {
$('.modal').not($(this)).each(function () {
$(this).modal('hide');
});
});
</script>
</html>
模态试验
&时代；
标题1
车身1
接近
第二
&时代；
标题2
车身2
接近
弗斯特
发射模态
$（文档）。在（'click'，'launchModalBtn'，函数（）{
$（'#modal_1'）.modal（）；
});
$（文档）.on（'单击'，'启动秒'），函数（）{
$（'#modal_2'）。modal（）；
})
$（文档）.on（'单击'，'启动第一'），函数（）{
$（'#modal_1'）.modal（）；
})
$（'.modal'）.on（'show.bs.modal'，函数（）{
$（'.modal'）。不是（$（this））。每个（函数（）{
$（this.modal（'hide'）；
});
});
$('body').on('show.bs.modal', '.modal', function () {
$('.modal:visible').removeClass('fade').modal('hide').addClass('fade');
});
有必要删除class
fade