Модальная Бутстрап не закрывается - PullRequest
Новая
       2

Модальная Бутстрап не закрывается

0 голосов
/ 18 марта 2019

У меня есть модал, который отображает сообщение об ожидании в другом модале после отправки формы. Однако при попытке закрыть модальное окно, когда я получаю ответ от формы, оно никогда не закрывает модальное с ожидающим сообщением. Самое близкое, что я получил к ожидаемому поведению, было с этим фрагментом кода, который закрывает модальный режим, но при желании показать его снова он никак не открывается.

модальности 

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

1 Ответ

0 голосов
/ 18 марта 2019

почему вы используете это? 

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

Если вы хотите показать или закрыть модальное, просто используйте это $('#myModal').modal('hide') или $('#myModal').modal('show') с правильным идентификатором, не удаляйте класс, который вы сломаетевсе

...