web-dev-qa-db-ja.com

bootstrap 4モーダルがhideを呼び出した後に閉じない

概要概要

Ajax呼び出し中は進行状況モーダルが表示され、完了または失敗した場合は$("#progessDialog").modal("hide");を呼び出して非表示にする必要があります。 hideイベントが発生していないようです。非表示イベントが発生したときにログに記録するように定義されたajaxフェイルハンドラーにイベントフックがあり、ログに記録されることはありませんが、その条件で期待どおりに別のログが出力されます。

_   $('#progessDialog').on('hidden.bs.modal', function (e) {
       console.log('calling modal hide');
   });
_

再現する手順：

  • 値（555または222）のいずれかをクリックして、インライン編集をトリガーします
  • 値を変更する
  • タブアウト

面白いこと

モーダルが非表示を拒否し、js呼び出しが完了した後、開発コンソールで$("#progessDialog").modal("hide")と入力すると、モーダルは期待どおりに非表示になります。

注：まだ終わっていないので、まだUIをぼろぼろにしないでください。ただし、UX/JSを改善するための建設的な批判を受け入れています。次に来る検証はゼロです。

私は他のいくつかのSO性質は似ているが、実際には同じではない質問を見てきました（これらの質問にはモーダルの一部が隠されているようですが、背景はありません-私の場合は完全なモーダルです） 。

これが問題を再現するjsフィドルです： https://jsfiddle.net/willtx/8dpL5rLd/29/

モーダル

_  <div class="modal fade" id="progessDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="progessDialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title" id="progessDialoglLabel">Processing...</h5>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
_
jqueryajaxtwitter-bootstrapbootstrap-modalbootstrap-4
8
Will Lopez

最後に、これに対する解決策は非常に簡単です。
Bootstrap docs about .modal('show') 、に記載されているように、呼び出しはモーダルが実際に表示される前（つまり、_shown.bs.modal_イベントが発生する前）に呼び出し元に送信されます。

あなたの場合、これは、モーダルに開くように命令すると、開始して開きますが、その直後に実行されることを意味します他のコードを続行します。したがって、操作の最後に.modal('hide')メソッドを呼び出すと、モーダルは実際には完全にロードされませんでした。これを回避するために、モーダルのロードが終了したときに_shown.bs.modal_イベントを監視し、その直後に.modal('hide')を呼び出すことができます。

また、さまざまな場所でモーダルを閉じたいので、モーダルの閉じを処理する関数を作成すると便利です。以下のようなもの。

_function closeModal() {
    $('#progessDialog').on('shown.bs.modal', function(e) {
        $("#progessDialog").modal("hide");
    });
}
_

提案された変更を加えたフィドルは次のとおりです。 https://jsfiddle.net/dferenc/5wehfss9/

8
dferenc