如何完全销毁Bootstrap模态窗口？

Question

我在向导实现中使用了模态窗口，大约有4,5个步骤。我需要在最后一步(onFinish)和取消步骤(OnCancel)后完全销毁它，而不需要刷新页面。当然，我可以隐藏它，但是隐藏模态窗口会在下次打开时还原所有内容。有谁能帮我解决这个问题吗？

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

- Akki

---

你是否在使用jQuery或类似的东西？可以尝试$(modal_selector).remove()。 - robbrit

谢谢，它可以工作，但是当我们使用rev=invoke时，它不会被modal.show()调用..那么如何重新调用它？ - Akki

先生，我想问一下如何调用、关闭和重新调用模态框。 - Akki

我通过在后台设置一个 Web 服务，使用 jQuery/JSON 按需提供 HTML，然后你可以简单地在完成后删除 HTML。这将使你能够无需刷新页面来完成操作。 - eandersson

这里有几种不同的方法。我想指出两件对于Bootstrap V3很重要的事情。首先，如果你正在使用$(this).data('modal',null)，你需要将'modal'替换为'bs.modal'。其次，我无法通过hidden事件来触发它，但是使用hide事件可以正常工作。 - DatsunBing

Answer 1

如果使用的是Bootstrap 3，您可以使用以下代码：

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

- user2612497

---

和其他回答一样，这似乎并没有去除背景。 - htulipe

@htulipe 这个方法是正确的，但是在模态框上使用过渡效果时它不会起作用。你需要从模态框中移除 .fade 类才能让它正常工作。 - drillingman

@drillingman：+1，这对我有用：$("#mimodal").removeClass('fade').modal('hide') - John Gietzen

在BS3中，仅有一个语句对我有效：$(this).html("");。该语句的作用是清空当前元素的内容。 - Ryan Currah

你要如何完全删除它？@Loenix - AlexioVay

Answer 2

注意：此解决方案仅适用于Bootstrap版本3之前。有关Bootstrap 3答案，请参见用户2612497的此贴。

您想要做的是：

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

这将导致模态框在每次显示时都重新初始化自身。因此，如果您正在使用远程内容加载到 div 或其他地方，则每次打开它时都会重新执行。您只需在每次隐藏后销毁模态框实例即可。

或者，每当您想触发元素的销毁（如果实际上并不是每次隐藏它），您只需要调用中间那行代码：

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

Twitter bootstrap 寻找其实例位于数据属性中，如果实例存在，则只切换它，如果实例不存在，则会创建一个新的。

希望这能帮到您。

- Conar Welsh

---

实际上，这确实起作用，但方式稍有不同。 $("#modalElement").removeData("modal"); 我正在使用Bootstrap 2.3.1和jQuery 1.9.1。 - tlavarea

如果您使用的是Bootstrap 3，请监听hidden.bs.modal事件，而不是hidden事件。 http://getbootstrap.com/javascript/#modals - Romain Paulus

Answer 3

对于 3.x 版本

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

对于2.x版本（风险较大；请阅读下面的评论），当您创建Bootstrap模态框时，页面上的三个元素会被更改。因此，如果您想完全回滚所有更改，您需要手动为每个元素进行操作。

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

- zelibobla

---

使用手动步骤是一种冒险的方法，因为Bootstrap代码可能会发生变化，您可能会错过一些方面。例如，在至少Bootstrap 3.2中，style="padding-right: 17px;"也将在body上设置以解决隐藏滚动条的问题。底线：使用Bootstraps API，在v3中将是$('.modal').modal('hide').data('bs.modal', null);。 - Oliver

是的，你说得对。这是为2.x版本编写的。已更新。 - zelibobla

如果您在动态注入数据到模态框中，并且删除了答案的第二部分，那么它将剥离比所需更多的内容。超出了重用模态框的范围。如果有帮助的话，我建议使用您特定的class.remove(); - alphapilgrim

Answer 4

你可以通过这种方式完全销毁一个模态框，而无需重新加载页面。

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

但它将完全从您的HTML页面中移除模态框。在此之后，模态框的隐藏和显示将无法正常工作。

- Arjun

---

.remove()完全删除它。而.show()不再起作用。我该怎么做重新初始化它？ - geeky_monster

由于创建Bootstrap模态框会更改body，因此建议的解决方案无法回滚所有更改。 - zelibobla

这行不通，因为背景会卡住，它为什么会被点赞呢？ - codenamezero

Answer 5

我尝试过被接受的回答，但在我的端上似乎不起作用，而我也不知道这个被接受的回答应该如何工作。

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

在我的电脑上完全正常运行。BS版本> 3

- طلحة

---

这会留下一个灰色的背景，同时也使网页无法使用！！ - Biju

在 BS4 上完美运行，而且背景会自动移除，并且它还会捕捉到模态框移除事件。 - Ivan

Answer 6

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

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

- John In't Hout

---

我不确定这怎么算是一个答案？问题明显是要求删除“bootstrap modal”，但是无论是文本还是示例都没有回答这个问题！ - AaA

Answer 7

也适用于Bootstrap 4.x。

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

- Cristian Ghirba

---

这会处理模态框但会保留一个灰色背景，导致网页无法使用。 - Biju

你尝试过哪个版本的Bootstrap？ - Cristian Ghirba

Answer 8

bootstrap 3 + jquery 2.0.3:

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

- user2813480

---

由于创建Bootstrap模态框会更改body，建议的解决方案无法回滚所有更改。 - zelibobla

Answer 9

如果您的模态框中有一个iframe，您可以使用以下代码删除其内容：

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

- Saeid

Answer 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})

- Robert Hoffmann