ここ]1を見ればわかるように、私はモーダルを起動するボタンを持っています。ボタンにhref urlを設定すると、このURLはBootstrap 3によって自動的にモーダルに読み込まれます。 事実、このページはモーダルのルートに読み込まれています(bootstrap 3 documentation for modals usageで述べられています)。私はそれを代わりにmodal-bodyにロードしたいのです。
javascriptではなく、属性を使ってそれを行う方法はありますか?あるいは、最も自動的な方法は何でしょうか?
P.S. Bootstrap 2では、コンテンツはルートではなくボディに読み込まれていたと記憶しています。
これは、ほんの少し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]に基づいています)。
<!-- Link trigger modal -->
<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal
</a>
<!-- Default bootstrap modal example -->
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
ご自身でお試しください:
このSOの答え](https://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal)をチェックしてみてください。
唯一の方法は、モーダル構造全体をajaxレスポンスで提供することのようです。
bootstrap source codeで確認できるように、load関数はroot要素にバインドされています。
ajaxレスポンスを変更できない場合、単純な回避策としては、ルート要素のshow/hide機能が壊れてしまうかもしれませんが、body要素で$(...).modal(...)
プラグインを明示的に呼び出すことができます。
このカスタム関数を探しているのではないでしょうか。この関数は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">
<button type="button" class="close" data-dismiss="modal">×</button>
<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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->