Question

我有一个Bootstrap 4 Modal，我正在用Ajax加载它。我在页面上只有外部容器：

<div class="modal fade" id="note-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"></div>

模态包含Ajax加载的表单：

$(body).on("click", "#add-note", function () {
    var url = '/add-a-note';
    $('#note-modal').modal();
    $.get(url, function (data) {
        $("#note-modal").html(data);
        CKEDITOR.on("instanceReady", function (event) {
            $('#loading-editor').hide();
        });
    });
});

该对话框可以很好地加载，但之后无法关闭它。我尝试过关闭按钮：

<a class="close" data-dismiss="modal" data-target="#note-modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>

我也尝试过：

$("#note-modal").modal('hide');

其中隐藏了模式但不隐藏背景，因此我停留在灰色叠加层上，以阻止与页面的交互。我似乎无法删除背景。

Answer 1

您可以尝试

$('#note-modal').modal('toggle');

Answer 2

似乎是由于使用空对话框引起的。我将以下内容添加到＃note-modal占位符中，并且现在可以关闭（即使已将其替换为Ajax）。

<div class="modal fade" id="note-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-label"></h4>
                <a class="close" data-dismiss="modal" data-target="#note-modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
            </div>
        </div>
    </div>
</div>

加载AJAX后无法关闭BS Modal

2 个答案: