【问题标题】：how to destroy bootstrap modal window completely?如何完全破坏引导模式窗口？
【发布时间】：2012-11-01 12:48:27
【问题描述】：

我已经使用 模态窗口 来实现一个向导，它有大约 4,5 个步骤。我需要在 最后一步(onFinish) 和 OnCancel 步骤之后完全销毁它，而无需刷新页面。我当然可以隐藏它，但是当我再次打开它时，隐藏模式窗口会恢复所有内容。有人可以帮我解决这个问题吗？

谢谢任何提示答案对我都有帮助。

【问题讨论】：

您使用的是 jQuery 还是类似的东西？或许可以做到$(modal_selector).remove()。
谢谢，让我看看它是否有效。
感谢它的工作，但是当我们 rev=invoke 没有被 modal.show() 调用时它......那么如何重新调用它？
是的remove 真的会删除模态框，所以它不能再次打开。 Twitter Bootstrap 的模态窗口并不是什么神奇的东西，所以当你重新打开一个模态对话框时，你必须手动重置所有表单元素（这是我的经验）。
这取决于您在模式中显示的内容。 Twitter Bootstrap 只处理模式的显示，其中的任何内容都是您的责任。

标签： twitter-bootstrap modal-dialog

【解决方案1】：

如果是 bootstrap 3，你可以使用：

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

【讨论】：

和其他答案一样，这似乎并没有消除背景。
@htulipe 该方法是正确的，但它不适用于模态上的过渡效果。您需要从 modal 中删除 .fade 类才能使其工作。
@drillingman：+1 对我有用：$("#mimodal").removeClass('fade').modal('hide')
BS3 中唯一对我有用的是：$(this).html("");
您究竟是如何完全删除它的？ @Loenix

【解决方案2】：

注意：此解决方案仅适用于版本 3 之前的 Bootstrap。有关 Bootstrap 3 的答案，请参阅this one by user2612497。

你想做的是：

$('#modalElement').on('hidden', function(){
    $(this).data('modal', null);
});

这将导致模态在每次显示时自行初始化。因此，如果您使用远程内容加载到 div 或其他内容中，它将在每次打开时重新执行。您只是在每次隐藏后销毁模态实例。

或者当你想触发元素的销毁时（如果不是每次你都隐藏它）你只需要调用中间行：

$('#modalElement').data('modal', null);

Twitter bootstrap 会在 data 属性中查找它的实例，如果一个实例存在，它只是切换它，如果一个实例不存在，它会创建一个新实例。

希望对您有所帮助。

【讨论】：

这实际上确实可以工作，但是方式略有不同$("#modalElement").removeData("modal");我使用的是 Bootstrap 2.3.1 和 jQuery 1.9.1
如果你使用 Bootstrap 3，你必须监听 hidden.bs.modal 而不是 hidden 事件。 getbootstrap.com/javascript/#modals

【解决方案3】：

对于 3.x 版本

$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );

对于 2.x 版本（有风险；请阅读下面的 cmets）当您创建引导模式时，页面上的三个元素被更改。因此，如果您想完全回滚所有更改，则必须为每个更改手动执行。

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

【讨论】：

使用手动步骤是一种有风险的方法，因为引导代码可能会更改，然后您可能会错过某些方面。例如，至少在 Bootstrap 3.2 中，style="padding-right: 17px;" 也将设置在 body 上，以考虑隐藏滚动条。底线：使用 Bootstraps API，在 v3 中为 $('.modal').modal('hide').data('bs.modal', null);。
是的，你是对的。这是为 2.x 版本编写的。已更新。
如果您将数据动态注入模态并且您删除了答案的所有第二部分，它将剥离的内容远远超出需要。超越了重用模态的点。如果有帮助，我建议使用您的特定 class.remove();

【解决方案4】：

通过这种方式，您可以在不重新加载页面的情况下完全销毁模态框。

$("#modal").remove();
$('.modal-backdrop').remove();

但它会从您的 html 页面中完全删除模态。此模式隐藏后显示将不起作用。

【讨论】：

.remove() 将其完全删除。并且 .show() 不再起作用。我该怎么做再次初始化它？
由于创建引导模式对body进行更改，建议的解决方案不会回滚所有更改。
这不行，因为背景会卡住，为什么它甚至得到了投票？

【解决方案5】：

我已经尝试过接受的答案，但它似乎对我不起作用，我不知道接受的答案应该如何工作。

$('#modalId').on('hidden.bs.modal', function () {
  $(this).remove();
})

这对我来说工作得很好。 BS 版本 > 3

【讨论】：

这会留下灰色背景，同时使网页无法使用！！
在 BS4 上完美运行，背景会自动移除，并会在模态移除事件中出现。

【解决方案6】：

jQuery 的强大功能。 $(selector).modal('hide').destroy(); 将首先删除您可能具有滑动效果的sinds，然后完全删除该元素，但是如果您希望用户在完成这些步骤后能够再次打开模式。您可能只想更新您想要重置的设置，因此要重置模式中的所有输入，如下所示：

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});

【讨论】：

【解决方案7】：

引导 3 + jquery 2.0.3：

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

【讨论】：

由于创建引导模式对body进行更改，建议的解决方案不会回滚所有更改。

【解决方案8】：

如果您的模态框中有 iframe，则可以通过以下代码删除其内容：

$('#myModal').on('hidden.bs.modal', function(){
   $(this).find('iframe').html("");
   $(this).find('iframe').attr("src", "");
});

【讨论】：

这是帮助我的那个 ;) 所以我不需要 api 来阻止它

【解决方案9】：

我的方法是使用 jQuery 的 clone() 方法。它会创建您元素的副本，这就是您想要的：您的第一个未更改模式的副本，您可以随意替换：Demo (jsfiddle)

var myBackup = $('#myModal').clone();

// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
});

我使用的标记是最基本的，所以你只需要绑定正确的元素/事件，你应该重置你的向导。

小心绑定delegated events，或在每次重置时重新绑定模态的内部元素，以便每个新模态的行为方式相同。

【讨论】：

【解决方案10】：

据我了解，您不想删除它，也不想隐藏它？因为您可能想稍后重用它..但是如果您再次打开它，不希望它具有旧内容？

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

如果您想将其用作动态模板，只需执行类似的操作

$(selector).modal({show: true})

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})

【讨论】：

【解决方案11】：

这是我的解决方案：

this.$el.modal().off();

【讨论】：

【解决方案12】：

也适用于 bootstrap 4.x

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );

【讨论】：

这会处理模态，但会留下灰色背景，使网页无法使用
您在哪个引导版本中尝试过？

【解决方案13】：

我有一个相同的场景，我会在单击按钮时打开一个新模式。完成后，我想将它从我的页面中完全删除...我使用 remove 删除模态。单击按钮时，我将检查模态是否存在，如果为真，我将销毁它并创建一个新的模态..

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});

【讨论】：

【解决方案14】：

$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3

【讨论】：

虽然此代码实际上可能是解决问题的方法，但通常最好在回答问题时说明它的作用。
好的。我很着急......无论如何添加“.remove（）;”用于删除引导模式的所有参考和 html 代码。

【解决方案15】：

这完全从 DOM 中删除了模态，也适用于“附加”模态。

#pickoptionmodal 是我的模态窗口的 id。

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){

e.preventDefault();

$("#pickoptionmodal").remove();

});

【讨论】：

在此之后，模态是否可以重新初始化？
@rahim.nagori 正如它在描述中所写的那样，正在从 DOM 中删除模态，您可以重新添加它...不是关闭模态，正在删除他，该线程是关于销毁模态的完全打开窗口。

【解决方案16】：

我必须在通过按钮单击关闭模式后立即销毁它，所以我想出了以下内容。

$("#closeModal").click(function() {
    $("#modal").modal('hide').on('hidden.bs.modal', function () {
        $("#modal").remove();
    });
});

请注意，这适用于 Bootstrap 3。

【讨论】：

这会留下灰色背景，同时使网页无法使用！！

【解决方案17】：

如果模态阴影仍然较暗并且不显示多个模态，那么这将很有帮助

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});

【讨论】：

Live 已经过时，可以替换为 on 并且如果您使用 jQuery，则您所定位的元素上的 [0] 不是必需的。此外，如果您完全移除背景，请注意您可能需要将其重新添加...尝试：$(document).on('hidden.bs.modal', '.modal', function(e) { if ($('.modal-backdrop').length) { $('.modal-backdrop').remove(); } });

【解决方案18】：

我必须对不同的链接点击使用相同的模式。我只是用隐藏回调中模态的空“”替换了html内容。

【讨论】：

【解决方案19】：

这对我有用。

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

对话框和背景消失了，但在我下次单击按钮时它们又回来了。

【讨论】：

【解决方案20】：

它适用于 Bootstrap v3.3.6

$('#dialog').modal()
.on('hide.bs.modal', function () {
    // Some Code
}).on('shown.bs.modal', function () {
    // Some Code
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});

【讨论】：

【解决方案21】：

只有这对我有用

$('body').on('hidden.bs.modal', '.modal', function() {
    $('selector').val('');
});

强制选择器将它们设为空白是安全的，因为引导程序和 jquery 版本可能是导致此问题的原因

【讨论】：

这会留下灰色背景，同时使网页无法使用！！

【解决方案22】：

单行完全删除隐藏（ES6）

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

【讨论】：

【解决方案23】：

使用 ui-router 这可能是您的一个选择。它在关闭时重新加载控制器，以便在下次触发之前重新初始化模态内容。

$("#myModalId").on('hidden.bs.modal', function () {
  $state.reload();  //resets the modal
});

【讨论】：

【解决方案24】：

这在 BS4 上对我有用：

let $modal = $(this);
$modal.modal('hide').on("hidden.bs.modal", function (){
    $modal.remove();
});

我们将模态框完全隐藏后移除。来自 BS 文档：

hidden.bs.modal：当模态结束时触发此事件对用户隐藏（将等待 CSS 转换完成）。

【讨论】：

【解决方案25】：

我不知道这听起来如何，但这对我有用............

$("#YourModalID").modal('hide');

【讨论】：

投了反对票，因为它只是隐藏了明显没有被问到的模式。