Как правильно закрыть модальное окно с помощью jquery или javascript внутри внедренного HTML?

Сценарий для вызова модала, и HTML скелет для модала: (который работает)

<script>
$(document).on("click", ".addworker", function (e) {
    e.preventDefault();
    var $popup = $("#popup");
    var popup_url = $(this).data("popup-url");
    $(".modal-content", $popup).load(popup_url, function () {
        $popup.modal("show");
    });
});
</script>

<div id="popup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        
        </div>
    </div>
</div>

HTML, загруженный в modal-content, возвращается представлением django, которое сидит за url. (эта часть тоже работает)

Внутри этого HTML у меня есть кнопка, которую я хочу использовать для повторного закрытия модала. Но когда модальный объект введен в HTML и открыт, кажется, что модальный объект находится вне области видимости, поэтому я попытался вернуть его обратно с помощью var $popup = $("#popup");. И я действительно получаю обратно объект, но метод $popup.modal("hide"); не работает.

<script>
    $(document).on("click", ".cancel", function (e) {
        var $popup = $("#popup");
        $popup.modal("hide");
    });
</script>

<div class="modal-header">
<h1>{{ aoe }} Worker: {{ id }}</h1>
</div>
<form action="add/" method="post">
    {% csrf_token %}
    <div class="modal-body">
    {{ form|crispy }}
    </div>
    <div class="modal-footer">
    <input type="button" class="btn btn-secondary cancel" value="Cancel">
    <input type="submit" class="btn btn-primary" value="Submit">
    </div>
</form>

Хотя закрытие модала с помощью $popup.modal().close() работает. но я не хочу этого, потому что тогда мне придется удалять много свойств css вручную. (например, фон остается серым, и я не могу ничего нажать на главной странице)

Вернуться на верх