如何清除关闭的Bootstrap远程模式内容？

Question

我正在启动一个包含远程内容的模式（但是在同一域中）。 可以在同一页面上多次打开具有不同内容的模态，因此当它关闭时，我需要它clear .modal-body部分。

我试图这样做：

function close_modal()

{

    $('.modal').modal('hide');

    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });


}

但是由于某种原因，当我打开另一个模态目标时，以前的内容在瞬间仍然可见。 我还检查了源代码，以前加载的内容仍然存在。 我该如何解决？ 这是我的标记：

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();
    var modal = $('#modal').modal();
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if ( textStatus === 'success' || 
                 textStatus === 'notmodified') 
            {
                modal.show();
            }
    });
});

和HTML：

<div id="modal" class="modal fade" 
     tabindex="-1" role="dialog" aria-labelledby="plan-info" aria-hidden="true">
    <div class="modal-dialog modal-full-screen">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" 
                  data-dismiss="modal" aria-hidden="true">
                  <span class="glyphicon glyphicon-remove-circle"></span>
                </button>
            </div>
            <div class="modal-body">
                <!-- /# content goes here -->
            </div>
        </div>
    </div>
</div>

Answer 1

您应该能够使用jQuery的empty方法从.modal-body删除所有子节点：

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).find('.modal-body').empty();
});

Answer 2

一个问题是，直到关闭后，您才监听关闭。 你有：

// Hide the modal
$('.modal').modal('hide');

// Start listening for the hide event, if the modal closes remove the data
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

取而代之的是移动隐藏侦听器，使它在hide事件之前运行（可能在函数外部，因为它只需要开始侦听一次），或者将其删除，然后只包含$('.modal').removeData('bs.modal');

Answer 3

假设您的模态没有做任何特别的事情，您可能会发现使用Bootbox.js之类的东西会更容易，它会即时生成您的Bootstrap模态。 您的代码如下所示：

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();

    var url = $(this).attr('href');

    $.get(url)
        .done(function (response, status, jqxhr) {
            // store a reference to the bootbox object
            var dialog = bootbox.dialog({
                message: response
            });
        })
        .fail(function(jqxhr, status, error){
            /* Do something when the form can't be loaded */
        });
});