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

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答案,请通过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页面中完全删除modal.这个模态隐藏显示后将无法正常工作.

Answer 5

我试过接受的答案，但似乎对我没有用，我不知道接受的答案应该如何工作。

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

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