【发布时间】：2018-04-13 13:06:16
【问题描述】：
这里是代码。
jQuery(document).ready(function() {
$('body').on('click', '#saves', function(event){
event.preventDefault();
$('#exampleModal').modal('hide');
$("#exampleModal").on("hidden.bs.modal",function(){
$('#Newmodel').modal('show')
});
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="saves" class="btn btn-primary">New Model</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="Newmodel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>除了成功函数中还有 ajax 请求和 jquery 之外，我的代码与链接代码相同。在第一个模型中，如果我提交，那么它会触发 ajax 请求并在成功函数中，根据 jquery 代码，关闭第一个模态并打开带有消息的第二个模态。在第一次打开第二个模式时没有问题。
问题是当我第二次打开第一个模态时，然后如果我不想要像单击提交这样的 ajax 请求，发送数据并关闭现有模态并打开新模态。所以我点击关闭按钮或页面的任何外部区域。所以第二个模态不应该打开，因为第二个模态没有触发器。但它仍然关闭第一个模态并打开第二个模态。
我不知道为什么在第一次运行后会发生这种情况。我不想打开第二个模式，除了提交点击。我也尝试过不使用“hidden.bs.modal()”函数，但在该方法中，滚动条在模式以外的背景页面上工作。 如果没有背景滚动，我该如何做到这一点？
【问题讨论】：
标签： jquery twitter-bootstrap bootstrap-modal