Question

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

模态

<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()
                   }
                });
              },
            })
         });
      });

Answer 1

为什么要使用它？

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

要显示或关闭模式时，只需使用带有正确ID的$('#myModal').modal('hide')或$('#myModal').modal('show')即可，不要删除类，这样会破坏一切

模态引导程序无法关闭

1 个答案: