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

Bootstrap 4 モーダル リモート データの読み込み

Twitter Bootstrap (v4 alpha) の最新リリースでは、リモート コンテンツをモーダルは削除されました。この機能は Bootstrap 3 には存在していましたが、現在はサポートされていません。

問題

bootstrap でリモート コンテンツをモーダルにロードするために data-remote 属性を使用しようとしたとき4、モデル本体は空のままで、リクエストは指定されたアドレスに送信されません。 URL.

解決策

この問題を解決するには、JavaScript を使用してリモート コンテンツをモーダル本文に手動でロードします。以下に例を示します。

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

このコードは、data-toggle="modal" 属性を持つすべての要素にイベント リスナーをアタッチします。これらの要素のいずれかがクリックされると、要素からデータリモート値が取得され、jQuery の .load() メソッドを使用してリモート コンテンツがモーダル本体にロードされます。

注:非推奨のリモート オプションは Bootstrap 4 で削除されており、クライアント側のテンプレート、データ バインディング フレームワークを使用するか、示されているように手動で jQuery.load() を呼び出すことによって実装することをお勧めします。上。

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