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

我已经使用了模式窗口来执行大约4,5个步骤的向导。 我需要在最后一步 （onFinish）和OnCancel步骤之后完全销毁它， 而不刷新页面 。 我当然可以隐藏它，但隐藏模式窗口恢复一切，因为当我打开它。 有谁能帮我解决这个问题吗？

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

Answer 1

如果是引导3，你可以使用：

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

Answer 2

注：此解决scheme仅适用于版本3之前的Bootstrap。对于Bootstrap 3答案，请参阅user2612497 。

你想要做的是：

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

这将导致模式每次显示时自行初始化。 所以，如果你正在使用远程内容加载到div或任何东西，它会重新做它每次打开。 每次隐藏之后，你只是摧毁模态实例。

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

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

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

希望有所帮助。

Answer 3

对于3.x版本

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

对于2.x版本（有风险;请阅读下面的评论）当您在页面上创build引导模态三个元素被更改。 所以，如果你想完全回滚所有的变化，你必须手动为每个变化。

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

Answer 4

你可以通过这种方式彻底销毁一个没有页面重载的模式。

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

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

Answer 5

jQuery的威力。 $(selector).modal('hide').destroy(); 将首先删除你可能有滑动的影响，然后完全删除元素，但是如果你希望用户能够在完成步骤后再次打开模态。 你可能只是想更新你想重置的设置，所以重新设置你的模态中的所有input，如下所示：

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

Answer 6

据我所知，你不想删除它，也不要隐藏它？ 因为你可能想以后重用它，但是如果你再次打开它，不希望它有旧的内容？

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

如果你想使用它作为一个dynamic模板只是做一些像

 $(selector).modal({show: true}) .... $(selector).modal({show: false}) $(".modal-body").empty() .... $(".modal-body").append("new stuff & text") $(selector).modal({show: true}) 

Answer 7

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

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

Answer 8

我的方法是使用jQuery的clone()方法。 它创build了一个你的元素的副本，这就是你想要的：你的第一个未改变的模式的副本，你可以在你的愿望中replace： 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); }); 

我使用的标记是最基本的，所以你只需要绑定正确的元素/事件，你应该让你的向导重置。

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

Answer 9

bootstrap 3 + jquery 2.0.3：

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

Answer 10

我有一个相同的场景，我会打开一个新的模式button点击。 一旦完成，我想完全删除它从我的网页…我使用删除删除模态..button单击我会检查是否存在模态，如果是真的，我会摧毁它，并创build一个新的模式..

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

Answer 11

这是我的解决scheme：

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

Answer 12

如果模态阴影仍然较暗，不会显示多个模态，那么这将是有帮助的

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

Answer 13

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

Answer 14

这对我有效。

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

对话框和背景消失了，但是当我下次点击button时他们又回来了。

Answer 15

它适用于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 16

只有这对我有效

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

因为bootstrap和jquery版本可能是导致这个问题的原因，所以安全select器使它们变成空白

Answer 17

 $('#myModal').on('hidden.bs.modal', function () { $(this).data('bs.modal', null).remove(); }); //Just add .remove(); //Bootstrap v3.0.3 

Answer 18

这是我发现的最好的解决scheme：

 /** * Stop an iframe or HTML5 <video> from playing * @param {Element} element The element that contains the video */ var stopVideo = function ( element ) { var iframe = element.querySelector( 'iframe'); var video = element.querySelector( 'video' ); if ( iframe ) { var iframeSrc = iframe.src; iframe.src = iframeSrc; } if ( video ) { video.pause(); } }; 

所有者： https ： //gist.github.com/cferdinandi/9044694

Answer 19

这完全消除了从DOM的模式，也为“附加”模式工作。

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

 $(document).on('hidden.bs.modal','#pickoptionmodal',function(e){ e.preventDefault(); $("#pickoptionmodal").remove(); }); 

Answer 20

我不知道这是怎么回事，但这个工作对我来说………..

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