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

Question

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

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

以下是我正在使用的脚本 我也收到.modal is not a function 的错误

  <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

Ajax 调用

 $('.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