モーダルウィンドウを表示させるのに、Bootstrap.jsを利用するのが、一番手っ取り早いし、しかも美しいと思います。（2016年5月20日現在の時点で）
しかし、モーダルの中に、別のページを埋め込みたいというのはよくある希望ですよね。
ですが、Bootstrap.jsの公式サイトでは、そのあたりがバージョンによって揺れているのでわかりにくいです。
とりあえず、現時点のバージョン（3.3.6）でのリモートページを読み込む方法を書いておきます。
<html>
<head>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/bootstrap-responsive.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
</head>
<body>
<!-- Link trigger modal -->
<a href="http://localhost/denzaburo/cake/gildotcom/shippers/search" data-toggle="modal" data-target="#myModal" class="btn btn-default">
モーダルを開く
</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>
</body>
</html>
- この方法でモーダルを設置したところ複数個のモーダルがある場合に呼び出す度に背景色がだんだんと黒くなってしまいました。何故でしょうか？お手数ですが御教示願えませんか？ — maho {2017-05-29 (月) 21:41:29}
- すみません、起こっていることは詳しくわかりませんが、だんだんと濃くなるというのは、ウィンドウが重なっているのではないでしょうか？ — 中の人 {2017-05-30 (火) 10:42:06}
- 別ページ内の読み込む要素を指定することは可能でしょうか。 — mana {2017-09-26 (火) 18:40:50}