如何彻底摧毁引导模式窗口？如何彻底摧毁引导模式窗口？(how to destroy bootstra

我做了使用模态窗口的有大约4,5步骤向导实现。 我需要最后一步 （onFinish）和OnCancel一步，而无需刷新页面后，彻底摧毁它。 当然，我可以将其隐藏，但这样当我再次打开它隐藏模态窗口恢复一切。 谁能帮我看这个问题？

感谢任何提示的答案对我来说是有帮助的。

Answer 1:

如果是自举3，你可以使用：

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

Answer 2:

注意：此方法仅适用于引导程序版本3之前对于引导3回答，请参考这一个user2612497 。

你要做的是：

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

这将导致该模式是显示每次初始化自身。 所以，如果你正在使用远程内容加载到DIV或什么的，它会重新做它每次它打开。 您每次隐藏时间后仅仅破坏模式的实例。

或当你想触发元素的破坏（如果它实际上不是每次你隐藏的时间），你只需要调用中间线：

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

Twitter的引导查找其实例位于数据属性，如果一个实例存在，它只是切换它，如果一个实例不存在，将创建一个新的。

希望帮助。

Answer 3:

对于3.x版

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

对于2.x版（风险;阅读下面评论）当你创建你的页面上的引导模式的三个要素被改变。 所以，如果你想完全回滚所有的变化，你必须对每一个它做手工。

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

Answer 4:

您可以通过这种方式彻底摧毁，而不刷新页面一个模式。

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

但它会完全从你的HTML页面中删除模式。 在此之后的模态隐藏显示将无法正常工作。

Answer 5:

据我了解，你不想删除它，也不隐瞒呢？ 因为你可能会想以后重新使用它..但不希望它有旧的内容如果有的话你再打开它？

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

Answer 6:

jQuery的的力量。 $(selector).modal('hide').destroy(); 会先删除sinds你可能有滑动的影响，然后完全删除元素，但是如果你希望用户能够为您完成步骤后再次打开模式。 你可能只是想更新只有你想有reseted所以在你的模式正在重置所有的投入，这将如下所示的设置：

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

Answer 7:

如果你有你的模式iframe中，你可以通过删除下面的代码内容：

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

Answer 8:

我曾尝试接受的答案，但它不似乎工作在我结束，我不知道该接受的答案是如何想的工作。

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

这是工作在我身边完美的罚款。 BS版> 3

Answer 9:

我的方法是使用clone()的jQuery的方法。 它创建你的元素的副本，这就是你想要的东西：你的第一个不变的模式的副本，你可以在你的愿望代替： 演示（的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);
});

我使用的标记是最基础的，所以你只需要在合适的元素/事件绑定，你应该有你的向导重置。

小心将绑定委派的事件 ，或者在每次重新绑定重置模式的内部元素，使每个新的模态行为相同的方式。

Answer 10:

自举3 +的jquery 2.0.3：

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

Answer 11:

这是我的解决方案：

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

Answer 12:

也适用于引导4.x版

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

Answer 13:

我有一个相同的情况下，我会打开一个按钮，点击一个新的模式。 一旦这样做，我想彻底从我的页面中移除...我使用删除删除模式..在点击链接，如果存在模式我会检查，如果真的，我会毁了它，并创建一个新的模式..

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

Answer 14:

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

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

Answer 15:

如果modal阴影仍然较暗，不打算用于显示一个以上的模式，那么这将是有益的

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

Answer 16:

我不得不使用同一模式的不同链接的点击次数。 我刚刚更换隐回调HTML内容空“”模态的。

Answer 17:

这为我工作。

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

对话和背景就走了，但下一次我按下按钮回来。

Answer 18:

它适用于引导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();
});

Answer 19:

只有这个工作对我来说

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

它是安全的强制选择，使他们空白，因为引导和jQuery版本可能是导致此问题的原因

Answer 20:

这完全删除从DOM的模态，正在为“追加”模态为好。

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

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

e.preventDefault();

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

});

Answer 21:

对隐藏单行彻底清除（ES6）

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

Answer 22:

随着UI的路由器，这可能是一个选择。 它重新加载在靠近控制器，以便重新初始化模式的内容，它触发下一次了。

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

Answer 23:

我有它通过点击一个按钮关闭后破坏模式正确，所以我想出了以下内容。

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

请注意，这可与引导3。

Answer 24:

我不知道这听起来可能，但这项工作对我来说...........

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

文章来源: how to destroy bootstrap modal window completely?