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

Question

我已经使用模态窗口进行了大约4,5步的向导实现。我需要在最后一步（onFinish）和 OnCancel步骤之后完全销毁它而不进行页面刷新。我当然可以隐藏它，但是当我再次打开它时，隐藏模态窗口会恢复所有内容。谁能在这个问题上帮助我？

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

Answer 1

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

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

Answer 2

注意：此解决方案仅适用于版本3之前的Bootstrap。对于Bootstrap 3答案，请参阅this one by 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，然后完全删除该元素，但是如果您希望用户能够在完成步骤后再次打开模式。您可能只想更新您想要重置的设置，以便重置模式中的所有输入，如下所示：

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

Answer 7

我已经尝试过接受过的答案，但它似乎并不适合我，而且我也不知道接受的答案是如何起作用的。

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

这对我来说非常好。 BS版本＆gt; 3

Answer 8

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

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

Answer 9

还可以在Bootstrap 4.x上工作

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

Answer 10

我的方法是使用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绑定，或在每次重置时重新绑定模态的内部元素，以便每个新模态的行为方式相同。

Answer 11

这是我的解决方案：

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

Answer 12

bootstrap 3 + jquery 2.0.3：

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

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-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

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

Answer 16

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

Answer 17

只有这对我有用

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

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

Answer 18

这完全删除了DOM中的模态，正在为＆＃34;附加＆＃34;模态也是如此。

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

Answer 19

隐藏（ES6）上的单行完全删除

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

Answer 20

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

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

Answer 21

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

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

请注意，这适用于Bootstrap 3。

Answer 22

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

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

Answer 23

我不知道这听起来怎么样但这对我有用............

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

如何完全破坏bootstrap模态窗口？

23 个答案:

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