Bootstrap 4 モーダルにリモート コンテンツをロードするにはどうすればよいですか?

Bootstrap 4 Modal でのリモート コンテンツのロード

Bootstrap 4 の出現により、Modal のリモート データ ロード機能に大きな変更がもたらされました。 Bootstrap 3 とは対照的に、Bootstrap 4 では、クライアント側のテンプレートまたはデータ バインディング フレームワークの使用が推奨されているため、リモート オプションが廃止されています。

Bootstrap 4 モーダルで検出された問題:

ユーザーは、新しい Bootstrap 4 アルファ リリースを使用してモーダルにリモート コンテンツをロードする際に問題が発生したと報告しています。ポップアップ ウィンドウが表示される間、モデル本体は空のままで、指定された URL からコンテンツをロードするリクエストが行われていないことを示します。

jQuery を使用した解決策:

リモート読み込み機能を復元するには、jQuery を使用して手動で実装できます。

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });  

説明

このソリューションでは、jQuery のload() メソッドを使用してコンテンツを動的に読み込みます。指定されたリモート URL から対象のモーダルの .modal-body 要素にコピーします。クリック イベント リスナーは、data-toggle="modal" 属性を持つすべての要素にバインドされており、アプリケーション内のすべてのモーダルに機能が確実に適用されます。

以上がBootstrap 4 モーダルにリモート コンテンツをロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。