Bootstrap 3 - モーダルボディのコンテンツをAJAXで読み込むには？

ここ]1を見ればわかるように、私はモーダルを起動するボタンを持っています。ボタンにhref urlを設定すると、このURLはBootstrap 3によって自動的にモーダルに読み込まれます。 事実、このページはモーダルのルートに読み込まれています（bootstrap 3 documentation for modals usageで述べられています）。私はそれを代わりにmodal-bodyにロードしたいのです。

javascriptではなく、属性を使ってそれを行う方法はありますか？あるいは、最も自動的な方法は何でしょうか？

P.S. Bootstrap 2では、コンテンツはルートではなくボディに読み込まれていたと記憶しています。

Zim
編集された質問 26日 4月 2018 в 11:28
プログラミング
modal-dialog ajax twitter-bootstrap-3 twitter-bootstrap
29日 10月 2013 в 4:08
15 ビュー

これは、ほんの少しjavascriptを追加するだけで、実際には超簡単です。リンクのhrefはajaxコンテンツのソースとして使用されます。Bootstrap 3.*では、非推奨のBootstrapロード関数を無効にするために、data-remote="false"を設定していることに注意してください。

JavaScriptを使用しています。

// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

Html（[公式の例][2]に基づいています）。


<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
    Launch Modal
</a>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <span aria-hidden="true">×</span>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        Close
        Save changes
      </div>
    </div>
  </div>
</div>

ご自身でお試しください： https://jsfiddle.net/ednon5d1/

[2]： http://getbootstrap.com/javascript/#live-demo

marcovtwout
編集した答え 6日 8月 2015 в 2:13
解説 (7)
ソリューション

このSOの答え](https://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal)をチェックしてみてください。

唯一の方法は、モーダル構造全体をajaxレスポンスで提供することのようです。

bootstrap source codeで確認できるように、load関数はroot要素にバインドされています。

ajaxレスポンスを変更できない場合、単純な回避策としては、ルート要素のshow/hide機能が壊れてしまうかもしれませんが、body要素で$(...).modal(...)プラグインを明示的に呼び出すことができます。

Community
編集した答え 23日 5月 2017 в 11:54
解説 (0)

このカスタム関数を探しているのではないでしょうか。この関数はdata-toggle属性を受け取り、リモートコンテンツを配置するために必要なdivを動的に作成します。AJAXで読み込みたいリンクに、data-toggle="ajaxModal"を配置するだけです。

JSの部分です。

$('[data-toggle="ajaxModal"]').on('click',
              function(e) {
                $('#ajaxModal').remove();
                e.preventDefault();
                var $this = $(this)
                  , $remote = $this.data('remote') || $this.attr('href')
                  , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
                $('body').append($modal);
                $modal.modal({backdrop: 'static', keyboard: false});
                $modal.load($remote);
              }
            );

最後に、リモートコンテンツでは、全体の構造を機能させる必要があります。

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            ×
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Button</a>
            <a href="#" class="btn btn-primary">Another button...</a>
        </div>
    </div>
</div>
Pratik Gadoya
編集した答え 20日 8月 2014 в 9:16
解説 (1)