web-dev-qa-db-ja.com

bootstrapモーダルウィンドウを完全に破壊する方法は？

約4,5ステップのウィザードの実装にmodal windowを使用しました。 最終ステップ（onFinish）およびページを更新せずにOnCancelステップの後に完全に破棄する必要があります。もちろん、非表示にすることもできますが、モーダルウィンドウを非表示にすると、再び開いたときにすべてが復元されます。誰もこの問題で私を助けることができますか？

ありがとうヒントの答えは私にとって役立ちます。

twitter-bootstrapmodal-dialog
75
Akki

if bootstrap 3の場合、使用できます：

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

注：このソリューションは、バージョン3以前のBootstrapに対してのみ機能します。Bootstrap 3の回答については、 this oneを参照してください。 by user2612497 。

あなたがしたいことは：

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

これにより、モーダルは表示されるたびに自動的に初期化されます。したがって、divなどにロードするためにリモートコンテンツを使用している場合、開くたびに再実行します。非表示になるたびに、モーダルインスタンスを破棄するだけです。

または、要素の破壊をトリガーしたいときはいつでも（実際に非表示にすることが毎回ではない場合）、中央の行を呼び出すだけです：

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

Twitter bootstrapは、データ属性にあるインスタンスを探します。インスタンスが存在する場合は単にトグルし、インスタンスが存在しない場合は新しいインスタンスを作成します。

それが役に立てば幸いです。

40
Conar Welsh

3.xバージョンの場合

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

2.xバージョンの場合（危険です。以下のコメントをお読みください）bootstrapモーダル3要素を作成するときに、ページに変更を加えます。したがって、すべての変更を完全にロールバックする場合は、各変更に対して手動で行う必要があります。

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

この方法により、ページをリロードせずにモーダルを完全に破棄できます。

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

ただし、HTMLページからモーダルが完全に削除されます。このモーダル非表示ショーは機能しません。

13
Arjun

私が理解していることから、あなたはそれを削除したり、隠したりしませんか？あなたは後でそれを再利用したいかもしれないので..しかし、あなたが再びそれを開くならば、それが古いコンテンツを持ちたくないのですか？

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

私は受け入れられた答えを試しましたが、それは私の終わりに働いていないようであり、受け入れられた答えがどのように機能するかを知りません。

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

これは私の側で完璧に機能しています。 BSバージョン> 3

3
طلحة

JQueryの力。 $(selector).modal('hide').destroy();は、最初にスライドの影響がある可能性のあるsindsを削除してから、要素を完全に削除しますが、手順の完了後にユーザーが再びモーダルを開くことができるようにする場合。リセットしたい設定のみを更新したい場合、モーダルのすべての入力をリセットするには、次のようになります。

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});
3
John In't Hout

モーダルにiframeがある場合、次のコードでそのコンテンツを削除できます。

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

ブートストラップ3 + jquery 2.0.3：

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

ボタンをクリックして閉じた直後にモーダルを破棄する必要があるため、次のように思いつきました。

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

これはBootstrap 3で機能することに注意してください。

2
d.i.joe

これは私の解決策です：

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

2
Daniel Ortegón

私のアプローチは、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);
});

私が使用したマークアップは最も基本的なものなので、正しい要素/イベントにバインドするだけで、ウィザードをリセットする必要があります。

委任されたイベント でバインドするように注意するか、または新しいモーダルが同じように動作するようにモーダルの内部要素をリセットするたびに再バインドします。

2
Sherbrow

bootstrap 4.xでも動作します

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

ボタンをクリックして新しいモーダルを開くのと同じシナリオがありました。完了したら、ページから完全に削除します... removeを使用して、モーダルを削除します。

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});
1
Vikalp Veer
$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3
1
Luca Di Lenardo

これだけが私のために働いた

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

bootstrapおよびjqueryバージョンがこの問題の原因である可能性があるため、セレクタを強制的に空白にすることは安全です。

0
Amir

これは私のために働いた。

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

ダイアログと背景は消えましたが、次にボタンをクリックしたときに戻ってきました。

0
Rob Y

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();
});
0
Maksym Kalin

Ui-routerでは、これはあなたのためのオプションかもしれません。クローズ時にコントローラをリロードするため、次回起動する前にモーダルコンテンツを再初期化します。

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

リンクのクリックごとに同じモーダルを使用する必要がありました。 htmlコンテンツを非表示のコールバックのモーダルの空の「」に置き換えました。

0
guy_fawkes

非表示の単一行の完全な削除（ES6）

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

0
Dieter Gribnitz

これにより、DOMからモーダルが完全に削除され、「追加された」モーダルでも機能します。

#pickoptionmodalは、モーダルウィンドウのIDです。

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

e.preventDefault();

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

});
0
Alin Razvan

モーダルシャドウが暗いままで、複数のモーダルを表示しない場合は、これが役立ちます

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