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

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

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

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

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

您想要做的是：

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

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

或者，每当您要触发元素的销毁时（如果实际上并非每次都隐藏它），您只需调用中间行：

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

Twitter引导程序查找其实例位于data属性中，如果一个实例存在，它将切换它，如果一个实例不存在，它将创建一个新实例。

希望能有所帮助。

对于3.x版本

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

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

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

您可以完全销毁模式，而无需重新加载页面。

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

但它将完全从您的HTML页面中删除模式信息。此模态皮革显示后将无法使用。

我已经尝试了接受的答案，但似乎无法正常工作，我也不知道接受的答案应该如何工作。

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

在我这边工作得很好。BS版本> 3

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

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

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

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

引导程序3 + jQuery 2.0.3：

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

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

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

我的方法是使用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);
});

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

注意绑定委托事件，或在每次重置时重新绑定模态的内部元素，以使每个新模态的行为相同。

这是我的解决方案：

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

我有一个相同的场景，我将在单击按钮时打开一个新的模式。完成后，我想将其从页面中完全删除...我使用remove删除模式。

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

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

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

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

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

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

e.preventDefault();

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

});

通过单击按钮关闭模态后，我必须立即销毁模态，因此我提出了以下建议。

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

请注意，这适用于Bootstrap 3。

也适用于Bootstrap 4.x

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

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

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

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

这对我有用。

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

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

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

只有这个对我有用

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

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

单行完整去除生皮（ES6）

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

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

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

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

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