通过 ajax 调用保存数据后对话框未关闭

Question

我想在通过 ajax 调用保存数据后关闭对话框，我已经使用了.hide()但它不起作用。 我使用代码隐藏了它及其背景，但这会影响页面的滚动。

当我使用该隐藏代码时，页面停止滚动

以下是我正在使用的脚本 我也收到错误.modal不是函数

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

我的模态代码

<div id="CommentAddPopUp" class="modal">
<div class="row" style="background-color: #E2EFDA;">
<div class="col-sm-12 col-md-12" style="background-color: #E2EFDA">
<h4><b>Add Comment</b></h4>
<hr style="border-bottom: 2px solid #64bcdc;" />
<div class="form-group row">
<label for="inputEmail" class="col-sm-3 col-form-label">Comment Type:</label>
<label for="inputEmail" class="col-sm-1 col-form-label">Public</label>
<div class="col-sm-2">
<input type="radio" name="CommentType" value="True" id="Public" />
</div>
<label for="inputPassword" class="col-sm-1 col-form-label">Private</label>
<div class="col-sm-2">
<input type="radio" name="CommentType" value="False" id="Private" class="rdPrivate" checked="checked" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label customLabel">Comment</label>
<div class="col-sm-8">
<textarea name="Comment" id="txtComment" runat="server" class="txtComment" style="width: 100%; margin-left: 10px" cols="80" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-4 col-form-label">Mark as Customer Call:</label>
<div class="col-sm-1">
<input type="checkbox" name="CustomerCall" runat="server" id="chkCustomerCall" class="form-control chkCustomerCall" />
</div>
</div>
<div class="form-group row">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary btnsavecomment" id="btnComment">Submit</button>
</div>
</div>
</div>
</div>
</div>

从这个模式中，我使用提交按钮类来调用 ajax 调用，即 btnsavecomment

阿贾克斯呼叫

$('.btnsavecomment').on("click", function () {
var Commenttype = $("input[name='CommentType']:checked").val();
var CustomerCall = $('.chkCustomerCall').is(':checked');
//});
var datas = {}
datas.OrderNo = $('.rdPOM').val();
datas.Comment = $('.txtComment').val();
datas.CommentType = Commenttype;
datas.CustomerCall = CustomerCall;
$.ajax({
type: "POST",
url: "Claims_View.aspx/SaveComment",
data: JSON.stringify(datas),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
debugger
var ClaimID = $(".hdnClaimId").val();
var OrderNo = $('.rdPOM').val();
Allfunctions(ClaimID, OrderNo);
$('#CommentAddPopUp').hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
// $("#CommentAddPopUp").hide();
//$(".jquery-modal").hide();
$('.txtComment').val('');
$('.chkCustomerCall').prop("checked",false) 
$(".rdPrivate").prop("checked", true);
//$('#CommentAddPopUp').modal('toggle');
},
failure: function (response) {
alert(response.d);
}
});
return false;
});

Answer 1

使用jQuery 使用打开模态的相同选择器隐藏模态。 看看这里 ： https://getbootstrap.com/docs/3.4/javascript/#modal-hide