我已经将模式窗口用于向导实现，它有大约 4,5 个步骤。我需要在最后一步（onFinish）和OnCancel 步骤之后完全销毁它，而无需刷新页面。我当然可以隐藏它，但是当我再次打开它时，隐藏模式窗口会恢复所有内容。有人可以帮我解决这个问题吗？
谢谢任何提示答案对我有帮助。
问问题
207304 次
25 回答
125
如果是引导程序 3，您可以使用：
$("#mimodal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
于 2013-08-11T07:20:46.607 回答
41
注意：此解决方案仅适用于版本 3 之前的 Bootstrap。有关 Bootstrap 3 的答案，请参阅user2612497 的这个答案。
你想做的是：
$('#modalElement').on('hidden', function(){
$(this).data('modal', null);
});
这将导致模态在每次显示时自行初始化。因此，如果您使用远程内容加载到 div 或其他内容中，它将在每次打开时重新执行。您只是在每次隐藏后销毁模态实例。
或者每当你想触发元素的销毁（如果不是每次你都隐藏它）你只需要调用中间行：
$('#modalElement').data('modal', null);
Twitter bootstrap 在 data 属性中寻找它的实例，如果一个实例存在它只是切换它，如果一个实例不存在它会创建一个新的。
希望有帮助。
于 2012-11-16T20:19:00.223 回答
19
对于 3.x 版本
$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );
对于 2.x 版本（有风险；阅读下面的评论）当您创建引导模式时，页面上的三个元素被更改。因此，如果您想完全回滚所有更改，则必须为每个更改手动执行。
$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );
于 2013-10-27T11:28:05.343 回答
13
通过这种方式，您可以在不重新加载页面的情况下完全破坏模式。
$("#modal").remove();
$('.modal-backdrop').remove();
但它会从您的 html 页面中完全删除模式。在此模态隐藏显示后将不起作用。
于 2012-12-19T07:50:47.057 回答
10
我已经尝试过接受的答案，但它似乎对我不起作用，我不知道接受的答案应该如何工作。
$('#modalId').on('hidden.bs.modal', function () {
$(this).remove();
})
这在我这边工作得很好。BS 版本 > 3
于 2018-05-15T07:41:35.207 回答
4
jQuery 的强大功能。$(selector).modal('hide').destroy();将首先删除您可能具有滑动效果的sinds，然后完全删除该元素，但是如果您希望用户在完成这些步骤后能够再次打开模式。您可能只想更新您想要重置的设置，因此要重置模式中的所有输入，如下所示：
$(selector).find('input, textarea').each(function(){
$(this).val('');
});
于 2012-11-12T00:35:46.973 回答
3
引导 3 + jquery 2.0.3：
$('#myModal').on('hide.bs.modal', function () {
$('#myModal').removeData();
})
于 2013-09-25T03:07:55.513 回答
3
如果您的模态框中有 iframe，则可以通过以下代码删除其内容：
$('#myModal').on('hidden.bs.modal', function(){
$(this).find('iframe').html("");
$(this).find('iframe').attr("src", "");
});
于 2014-09-09T08:17:57.620 回答
2
我的方法是使用clone()jQuery的方法。它会创建您的元素的副本，这就是您想要的：您的第一个未更改模式的副本，您可以随意替换它：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);
});
我使用的标记是最基本的，所以你只需要绑定正确的元素/事件，你应该重置你的向导。
小心绑定委托事件，或者在每次重置模态的内部元素时重新绑定，以便每个新模态的行为方式相同。
于 2012-11-05T21:37:08.367 回答
2
据我了解，您不想删除它，也不想隐藏它？因为您可能想稍后重用它..但是如果您再次打开它，不希望它具有旧内容？
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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})
于 2012-11-09T22:47:47.040 回答
2
这是我的解决方案：
this.$el.modal().off();
于 2017-07-18T15:58:06.207 回答
2
也适用于引导程序 4.x
$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );
于 2018-08-10T13:50:06.980 回答
1
我有一个相同的场景，我会在单击按钮时打开一个新模式。完成后，我想将它从我的页面中完全删除...我使用 remove 删除模态.. 在按钮单击时，我将检查模态是否存在，如果为真，我将销毁它并创建一个新的模态..
$("#wizard").click(function() {
/* find if wizard is already open */
if($('.wizard-modal').length) {
$('.wizard-modal').remove();
}
});
于 2016-08-30T21:10:21.787 回答
1
$('#myModal').on('hidden.bs.modal', function () {
$(this).data('bs.modal', null).remove();
});
//Just add .remove();
//Bootstrap v3.0.3
于 2017-06-16T12:31:57.933 回答
1
这完全从 DOM 中删除了模态，也适用于“附加”模态。
#pickoptionmodal 是我的模态窗口的 ID。
$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){
e.preventDefault();
$("#pickoptionmodal").remove();
});
于 2017-10-22T19:14:41.380 回答
1
我必须在通过按钮单击关闭模式后立即销毁它，所以我想出了以下内容。
$("#closeModal").click(function() {
$("#modal").modal('hide').on('hidden.bs.modal', function () {
$("#modal").remove();
});
});
请注意，这适用于 Bootstrap 3。
于 2018-07-19T03:22:32.940 回答
0
如果模态阴影仍然较暗并且不显示多个模态，那么这将很有帮助
$('.modal').live('hide',function(){
if($('.modal-backdrop').length>1){
$('.modal-backdrop')[0].remove();
}
});
于 2013-02-12T15:27:55.807 回答
0
我不得不对不同的链接点击使用相同的模式。我只是用隐藏回调中模态的空“”替换了html内容。
于 2013-10-31T05:26:32.303 回答
0
只有这对我有用
$('body').on('hidden.bs.modal', '.modal', function() {
$('selector').val('');
});
强制选择器将它们设为空白是安全的，因为引导程序和 jquery 版本可能是导致此问题的原因
于 2015-05-14T21:29:53.220 回答
0
这对我有用。
$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');
对话框和背景消失了，但当我下次单击按钮时它们又回来了。
于 2015-09-01T18:21:58.623 回答
0
它适用于 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();
});
于 2017-01-15T16:13:44.893 回答
0
单行完全删除隐藏（ES6）
$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());
于 2018-02-21T21:35:10.747 回答
0
使用 ui-router 这可能是您的一个选择。它在关闭时重新加载控制器，以便在下次触发之前重新初始化模态内容。
$("#myModalId").on('hidden.bs.modal', function () {
$state.reload(); //resets the modal
});
于 2018-03-06T03:27:00.260 回答
0
这在 BS4 上对我有用：
let $modal = $(this);
$modal.modal('hide').on("hidden.bs.modal", function (){
$modal.remove();
});
我们在完全隐藏后删除模态。来自 BS 文档：
hidden.bs.modal：当模式对用户完成隐藏时触发此事件（将等待 CSS 转换完成）。
于 2021-10-13T10:55:01.220 回答
-4
我不知道这听起来如何，但这对我有用............
$("#YourModalID").modal('hide');
于 2016-10-19T16:34:35.980 回答