89

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

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

4

25 に答える 25

41

注: このソリューションは、バージョン 3 より前の Bootstrap でのみ機能します。Bootstrap 3 の回答については、user2612497 によるこの回答を参照してください。

あなたがしたいことは次のとおりです。

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

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

または、要素の破棄をトリガーしたいときはいつでも（実際には非表示にするたびにそうではない場合）、真ん中の行を呼び出すだけです：

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

Twitter ブートストラップは、そのインスタンスが data 属性に配置されているかどうかを調べます。インスタンスが存在する場合はそれを切り替え、インスタンスが存在しない場合は新しいインスタンスを作成します。

それが役立つことを願っています。

于 2012-11-16T20:19:00.223 に答える
13

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

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

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

于 2012-12-19T07:50:47.057 に答える
10

受け入れられた回答を試してみましたが、私の側では機能していないようで、受け入れられた回答がどのように機能するかわかりません。

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

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

于 2018-05-15T07:41:35.207 に答える
4

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

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});
于 2012-11-12T00:35:46.973 に答える
3

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

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})
于 2013-09-25T03:07:55.513 に答える
2

私が理解していることから、あなたはそれを削除したり隠したりしたくありませんか？後で再利用したいかもしれませんが、もう一度開いたときに古いコンテンツを残したくありませんか?

<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…&lt;/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})
于 2012-11-09T22:47:47.040 に答える
2

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

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

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

于 2012-11-05T21:37:08.367 に答える
1

ボタンのクリックで新しいモーダルを開く同じシナリオがありました。完了したら、ページから完全に削除したい... remove を使用してモーダルを削除します..ボタンをクリックすると、モーダルが存在するかどうかを確認し、真の場合はそれを破棄して新しいモーダルを作成します..

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});
于 2016-08-30T21:10:21.787 に答える
0

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

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

ブートストラップとjqueryのバージョンがこの問題の原因である可能性があるため、セレクターを強制的に空白にすることは安全です

于 2015-05-14T21:29:53.220 に答える
0

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

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});
于 2013-02-12T15:27:55.807 に答える
-4

これがどのように聞こえるかはわかりませんが、これは私にとってはうまくいきます.....

$("#YourModalID").modal('hide');
于 2016-10-19T16:34:35.980 に答える