約 4,5 ステップのウィザードの実装にモーダル ウィンドウを使用しました。ページを更新せずに、最後のステップ(onFinish) とOnCancel ステップの後に完全に破棄する必要があります。もちろん非表示にすることもできますが、モーダル ウィンドウを非表示にすると、再度開いたときにすべてが復元されます。誰かがこの問題について私を助けてくれますか?
ありがとう ヒントの答えは私にとって役に立ちます。
約 4,5 ステップのウィザードの実装にモーダル ウィンドウを使用しました。ページを更新せずに、最後のステップ(onFinish) とOnCancel ステップの後に完全に破棄する必要があります。もちろん非表示にすることもできますが、モーダル ウィンドウを非表示にすると、再度開いたときにすべてが復元されます。誰かがこの問題について私を助けてくれますか?
ありがとう ヒントの答えは私にとって役に立ちます。
注: このソリューションは、バージョン 3 より前の Bootstrap でのみ機能します。Bootstrap 3 の回答については、user2612497 によるこの回答を参照してください。
あなたがしたいことは次のとおりです。
$('#modalElement').on('hidden', function(){
$(this).data('modal', null);
});
これにより、モーダルが表示されるたびに初期化されます。したがって、リモート コンテンツを使用して div などにロードしている場合は、開かれるたびに再実行されます。非表示になるたびに、モーダル インスタンスを破棄するだけです。
または、要素の破棄をトリガーしたいときはいつでも(実際には非表示にするたびにそうではない場合)、真ん中の行を呼び出すだけです:
$('#modalElement').data('modal', null);
Twitter ブートストラップは、そのインスタンスが data 属性に配置されているかどうかを調べます。インスタンスが存在する場合はそれを切り替え、インスタンスが存在しない場合は新しいインスタンスを作成します。
それが役立つことを願っています。
この方法により、ページをリロードせずにモーダルを完全に破棄できます。
$("#modal").remove();
$('.modal-backdrop').remove();
ただし、htmlページからモーダルを完全に削除します。このモーダル非表示の後、ショーは機能しません。
受け入れられた回答を試してみましたが、私の側では機能していないようで、受け入れられた回答がどのように機能するかわかりません。
$('#modalId').on('hidden.bs.modal', function () {
$(this).remove();
})
これは私の側では完全にうまく機能しています。BS バージョン > 3
jQueryの力。$(selector).modal('hide').destroy();
最初にスライドの影響を受ける可能性のある罪を削除してから、要素を完全に削除しますが、手順の完了後にユーザーがモーダルを再度開くことができるようにする場合。リセットしたい設定だけを更新したいだけなので、モーダルのすべての入力をリセットするには、次のようになります。
$(selector).find('input, textarea').each(function(){
$(this).val('');
});
ブートストラップ 3 + jquery 2.0.3:
$('#myModal').on('hide.bs.modal', function () {
$('#myModal').removeData();
})
私が理解していることから、あなたはそれを削除したり隠したりしたくありませんか?後で再利用したいかもしれませんが、もう一度開いたときに古いコンテンツを残したくありませんか?
<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})
私のアプローチはclone()
、jQuery のメソッドを使用することです。それはあなたの要素のコピーを作成します、そしてそれはあなたが望むものです:あなたの希望で置き換えることができるあなたの最初の変更されていないモーダルのコピー:デモ(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);
});
私が使用したマークアップは最も基本的なものなので、適切な要素/イベントにバインドするだけでよく、ウィザードをリセットする必要があります。
委譲されたイベントとバインドするか、モーダルの内部要素をリセットするたびに再バインドして、新しい各モーダルが同じように動作するように注意してください。
ボタンのクリックで新しいモーダルを開く同じシナリオがありました。完了したら、ページから完全に削除したい... remove を使用してモーダルを削除します..ボタンをクリックすると、モーダルが存在するかどうかを確認し、真の場合はそれを破棄して新しいモーダルを作成します..
$("#wizard").click(function() {
/* find if wizard is already open */
if($('.wizard-modal').length) {
$('.wizard-modal').remove();
}
});
これだけが私のために働いた
$('body').on('hidden.bs.modal', '.modal', function() {
$('selector').val('');
});
ブートストラップとjqueryのバージョンがこの問題の原因である可能性があるため、セレクターを強制的に空白にすることは安全です
モーダル シャドウが暗いままで、複数のモーダルを表示しない場合は、これが役立ちます。
$('.modal').live('hide',function(){
if($('.modal-backdrop').length>1){
$('.modal-backdrop')[0].remove();
}
});
これがどのように聞こえるかはわかりませんが、これは私にとってはうまくいきます.....
$("#YourModalID").modal('hide');