0

我正在使用 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 中删除模态窗口？

4

2 回答 2

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是相关模态的名称。

于 2013-04-24T18:55:16.763 回答
0

使用.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。

于 2013-04-24T16:09:48.380 回答