約4,5ステップのウィザードの実装にmodal windowを使用しました。 最終ステップ(onFinish)およびページを更新せずにOnCancelステップの後に完全に破棄する必要があります。もちろん、非表示にすることもできますが、モーダルウィンドウを非表示にすると、再び開いたときにすべてが復元されます。誰もこの問題で私を助けることができますか?
ありがとうヒントの答えは私にとって役立ちます。
if bootstrap 3の場合、使用できます:
$("#mimodal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
注:このソリューションは、バージョン3以前のBootstrapに対してのみ機能します。Bootstrap 3の回答については、 this oneを参照してください。 by user2612497 。
あなたがしたいことは:
$('#modalElement').on('hidden', function(){
$(this).data('modal', null);
});
これにより、モーダルは表示されるたびに自動的に初期化されます。したがって、divなどにロードするためにリモートコンテンツを使用している場合、開くたびに再実行します。非表示になるたびに、モーダルインスタンスを破棄するだけです。
または、要素の破壊をトリガーしたいときはいつでも(実際に非表示にすることが毎回ではない場合)、中央の行を呼び出すだけです:
$('#modalElement').data('modal', null);
Twitter bootstrapは、データ属性にあるインスタンスを探します。インスタンスが存在する場合は単にトグルし、インスタンスが存在しない場合は新しいインスタンスを作成します。
それが役に立てば幸いです。
3.xバージョンの場合
$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );
2.xバージョンの場合(危険です。以下のコメントをお読みください)bootstrapモーダル3要素を作成するときに、ページに変更を加えます。したがって、すべての変更を完全にロールバックする場合は、各変更に対して手動で行う必要があります。
$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );
この方法により、ページをリロードせずにモーダルを完全に破棄できます。
$("#modal").remove();
$('.modal-backdrop').remove();
ただし、HTMLページからモーダルが完全に削除されます。このモーダル非表示ショーは機能しません。
私が理解していることから、あなたはそれを削除したり、隠したりしませんか?あなたは後でそれを再利用したいかもしれないので..しかし、あなたが再びそれを開くならば、それが古いコンテンツを持ちたくないのですか?
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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})
私は受け入れられた答えを試しましたが、それは私の終わりに働いていないようであり、受け入れられた答えがどのように機能するかを知りません。
$('#modalId').on('hidden.bs.modal', function () {
$(this).remove();
})
これは私の側で完璧に機能しています。 BSバージョン> 3
JQueryの力。 $(selector).modal('hide').destroy();
は、最初にスライドの影響がある可能性のあるsindsを削除してから、要素を完全に削除しますが、手順の完了後にユーザーが再びモーダルを開くことができるようにする場合。リセットしたい設定のみを更新したい場合、モーダルのすべての入力をリセットするには、次のようになります。
$(selector).find('input, textarea').each(function(){
$(this).val('');
});
モーダルにiframeがある場合、次のコードでそのコンテンツを削除できます。
$('#myModal').on('hidden.bs.modal', function(){
$(this).find('iframe').html("");
$(this).find('iframe').attr("src", "");
});
ブートストラップ3 + jquery 2.0.3:
$('#myModal').on('hide.bs.modal', function () {
$('#myModal').removeData();
})
ボタンをクリックして閉じた直後にモーダルを破棄する必要があるため、次のように思いつきました。
$("#closeModal").click(function() {
$("#modal").modal('hide').on('hidden.bs.modal', function () {
$("#modal").remove();
});
});
これはBootstrap 3で機能することに注意してください。
これは私の解決策です:
this.$el.modal().off();
私のアプローチは、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);
});
私が使用したマークアップは最も基本的なものなので、正しい要素/イベントにバインドするだけで、ウィザードをリセットする必要があります。
委任されたイベント でバインドするように注意するか、または新しいモーダルが同じように動作するようにモーダルの内部要素をリセットするたびに再バインドします。
bootstrap 4.xでも動作します
$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );
ボタンをクリックして新しいモーダルを開くのと同じシナリオがありました。完了したら、ページから完全に削除します... removeを使用して、モーダルを削除します。
$("#wizard").click(function() {
/* find if wizard is already open */
if($('.wizard-modal').length) {
$('.wizard-modal').remove();
}
});
$('#myModal').on('hidden.bs.modal', function () {
$(this).data('bs.modal', null).remove();
});
//Just add .remove();
//Bootstrap v3.0.3
これだけが私のために働いた
$('body').on('hidden.bs.modal', '.modal', function() {
$('selector').val('');
});
bootstrapおよびjqueryバージョンがこの問題の原因である可能性があるため、セレクタを強制的に空白にすることは安全です。
これは私のために働いた。
$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');
ダイアログと背景は消えましたが、次にボタンをクリックしたときに戻ってきました。
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();
});
Ui-routerでは、これはあなたのためのオプションかもしれません。クローズ時にコントローラをリロードするため、次回起動する前にモーダルコンテンツを再初期化します。
$("#myModalId").on('hidden.bs.modal', function () {
$state.reload(); //resets the modal
});
リンクのクリックごとに同じモーダルを使用する必要がありました。 htmlコンテンツを非表示のコールバックのモーダルの空の「」に置き換えました。
非表示の単一行の完全な削除(ES6)
$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());
これにより、DOMからモーダルが完全に削除され、「追加された」モーダルでも機能します。
$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){
e.preventDefault();
$("#pickoptionmodal").remove();
});
モーダルシャドウが暗いままで、複数のモーダルを表示しない場合は、これが役立ちます
$('.modal').live('hide',function(){
if($('.modal-backdrop').length>1){
$('.modal-backdrop')[0].remove();
}
});