Question

我正在使用Bootstrap（版本2.3.1），我正在使用Ajax加载模态窗口。当我关闭模态窗口时，有没有办法从DOM中删除模态窗口？

$('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');

        if (url.indexOf('#') == 0) {
         $(url).modal('open');
        } else {
            $.get(url, function(data) {
                $(data).modal();
            }).success(function() {
                console.log('success');

                // I tried this below but didn't work
                // $('#modalClose).on('click',function(){
                //    $('#myModalWindow').remove();
                // });
            });
        }
    });

我的按钮：

<a href="path/to/modal.html" data-target="#" data-toggle="modal">Launch modal</a>

在我的模态窗口中，我有一个关闭按钮。

<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

然而，当我关闭模态时，html仍然在DOM中，如果我再次加载模式，它会再次输出HTML。当我关闭模态窗口时，有没有办法从DOM中删除模态窗口？

Answer 1

需要删除与Bootstrap模式关联的其他css类。

尝试成功：

$('body').on('click', '#btn-close-modal', function () {
    $('#my-modal').modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
});

btn-close-modal是某个按钮，用于移除模态，my-modal是相关模态的名称。

Answer 2

使用.remove()非常简单：

<button id="ModalClose" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

$('#ModalClose').on('click',function(){
    $('#IdOfModal').remove();
});

这应该从DOM中删除完整的模态HTML。请注意，我给了关闭按钮一个id，并使用该id作为点击参考。

如果您的模态（因此关闭按钮）是通过AJAX加载的，那么动态加载的元素将只能使用任何Javascript / jQuery，如果应用于该模态的加载的回调函数。

使用Ajax通过Twitter Bootstrap加载/卸载模态窗口

2 个答案: