bootstrap3で任意のURLをモーダル内に読み込む

動的にモーダルの中身を変更したい場合があります。
そんな時の方法についてご紹介。

まずはモーダルを表示したい方のHTML。
モーダルが開くタイミングで、show.bs.modalでイベントをひろって
data-hrefで設定したURLを読み込ませています。

sample.html

<a href="#" data-href="load.html" data-toggle="modal" data-target="#modalDetails">リンク</a>

<!-- Modal -->
<div class="modal fade" id="modalDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
  </div>
</div>

<script>
$(function () {
	//任意のリンクをモーダル内に読み込む
	$("#modalDetails").on("show.bs.modal", function(e) {
	    var link = $(e.relatedTarget); //クリックしたセルのオブジェクトデータ
	    $(this).find(".modal-content").load(link.attr("data-href"));
	});
});
</script>

動的に表示するためのHTMLです。

load.html

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">タイトル</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>