twitter-bootstrap 如何完全销毁引导模式窗口？

how to destroy bootstrap modal window completely?

提问by Akki

I've made use of modal windowfor a wizard implementation which has around 4,5 steps. I need to destroy it completely after the last step(onFinish) and OnCancel step without having a page refresh. I can of course hide it, but hiding modal windows restores everything as such when i open up it again. Could anyone help me on this issue?

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

Thanks Any hints answers are helpful for me.

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

回答by user2612497

if is bootstrap 3 you can use:

如果是引导程序 3，您可以使用：

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

回答by Conar Welsh

NOTE: This solution works only for Bootstrap before version 3. For a Bootstrap 3 answer, refer to this one by user2612497.

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

What you want to do is:

你想要做的是：

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

that will cause the modal to initialize itself every time it is shown. So if you are using remote content to load into the div or whatever, it will re-do it everytime it is opened. You are merely destroying the modal instance after each time it is hidden.

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

Or whenever you want to trigger the destroying of the element (in case it is not actually every time you hide it) you just have to call the middle line:

或者每当你想触发元素的销毁（以防它不是每次隐藏它时），你只需要调用中间行：

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

Twitter bootstrap looks for its instance to be located in the data attribute, if an instance exists it just toggles it, if an instance doesn't exist it will create a new one.

Twitter bootstrap 会在 data 属性中寻找它的实例，如果一个实例存在它只是切换它，如果一个实例不存在它会创建一个新的。

Hope that helps.

希望有帮助。

回答by zeliboba

For 3.x version

对于 3.x 版本

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

For 2.x version (risky; read comments below) When you create bootstrap modal three elements on your page being changed. So if you want to completely rollback all changes, you have to do it manually for each of it.

对于 2.x 版本（有风险；阅读下面的评论）当您创建引导模式时，页面上的三个元素被更改。因此，如果您想完全回滚所有更改，则必须为每个更改手动执行。

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

回答by Arjun

You can completely destroy a modal without page reloading by this way.

您可以通过这种方式完全销毁模态而无需重新加载页面。

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

but it will completely remove modal from your html page. After this modal hide show will not work.

但它会从您的 html 页面中完全删除模态。此模式隐藏显示后将不起作用。

回答by John In't Hout

The power of jQuery. $(selector).modal('hide').destroy();will first remove sinds you might have the sliding affect and then removes the element completely, however if you want the user to be able to open the modal again after you finished the steps. you might just wanna update only the settings you wanna have reseted so for reseting all the inputs in your modal this would look like the following:

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

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

回答by ????

I have tried accepted answer but it isn't seems working on my end and I don't know how the accepted answer suppose to work.

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

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

This is working perfectly fine on my side. BS Version > 3

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

回答by Robert Hoffmann

From what i understand, you don't wanna remove it, nor hide it ? Because you might wanna reuse it later ..but don't want it to have the old content if ever you open it up again ?

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

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

If you wanna use it as a dynamic template just do something like

如果您想将其用作动态模板，请执行以下操作

$(selector).modal({show: true})

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

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

回答by Saeid Zebardast

If you have an iframe in your modal, you can remove its content by the following code:

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

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

回答by Sherbrow

My approach would be to use the clone()method of jQuery. It creates a copy of your element, and that's what you want : a copy of your first unaltered modal, that you can replace at your wish : Demo (jsfiddle)

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

The markup I used is the most basic, so you just need to bind on the right elements / events, and you should have your wizard reset.

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

Be carefulto bind with delegated events, or rebind at each reset the inner elements of your modal so that each new modal behave the same way.

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

回答by user2813480

bootstrap 3 + jquery 2.0.3:

引导程序 3 + jquery 2.0.3：

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