Modal Bootstrap不会关闭

问题描述 投票:0回答:1

我有一个模态,在发送表单后在另一个模态中显示等待消息。但是,当我从表单获取响应时尝试关闭模式时,它永远不会用等待消息关闭模态。我得到预期行为的最接近的是这段代码确实关闭了模态,但是当想要再次显示它时它不会以任何方式打开。

礼貌

<div id="addTestModal" class="modal fade" role="dialog">
 <div class="modal-dialog modal-lg">
    <div class="row justify-content-center" style="padding-top: 1rem">
        <div class="col-md-6">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Add a New Test</h5>
                    <button type="button" class="close" data-dismiss="modal">x</button>
                </div>
                <div class="modal-body">
                    <form id="test_form" method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        .
                        .
                        .
                        <button type="submit" id="btn_submit" name="submit-label" class="btn btn-primary">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="alertModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="row justify-content-center" style="padding-top: 1rem">
            <div class="col-md-6">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Wait while loading the test</label>
                            <img src="http://www.wallpaperama.com/post-images/forums/200903/07p-6606-loading-circle-.gif" style="display: block; margin: 0 auto;" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

脚本

$(function(){
    let modal_test = $("#addTestModal");
    const url_test_form = "{% url 'add_test' %}";
    $("#addTest a").click(function() {
        modal_test.load(url_test_form,function() {
        $(this).modal('show');
        $("#test_form").submit(function (e) {
            e.preventDefault();
            $('#alertModal').modal('show');
            let postData = new FormData($("#test_form")[0]);
               $.ajax({
                   method: "POST",
                   processData: false,
                   contentType: false,
                   data: postData,
                   url: "{% url 'add_homework' %}",
                   success: function(data) {
                       $('#alertModal').modal('hide');
                       modal_test.modal('hide');
                   },
                   error: function(data) {
                       $("#alertModal").removeClass("in");
                       $(".modal-backdrop").remove();
                       $("#alertModal").hide()
                   }
                });
              },
            })
         });
      });
jquery bootstrap-4 bootstrap-modal
1个回答
0
投票

为什么你要用它?

$("#alertModal").removeClass("in");
$(".modal-backdrop").remove();
$("#myModal").hide()

当你想显示或关闭一个模态只需使用这个$('#myModal').modal('hide')$('#myModal').modal('show')与正确的id,不要删除类,你将打破一切

© www.soinside.com 2019 - 2024. All rights reserved.