Twitter bootstrapモーダルは、モーダル内に外部URLをロードしません。
サンプルコード: jsFiddle
<a data-toggle="modal" class="btn" href="http://stackoverflow.com" data-target="#myModal">click me</a>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
</div>
</div>
同じ オリジンポリシー制限 に違反しているため、これは機能しません。これにより、AJAXがここで使用しているクロスドメインbootstrapリクエストを送信できなくなります。したがって、1つの可能性は、外部コンテンツを<iframe>
にロードすることです。
$('a.btn').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('.modal-body').html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>');
});
一部のサイト(google、stackoverflow、facebookなど)はiframeに読み込めないことに注意してください。彼らはX-Frame-Options
応答HTTPヘッダーをSAMEORIGIN
に設定しており、iframe
内にロードされているかどうかも確認しています。
あなたはこのフィドルでそれが実際に動いているのを見ることができます: http://jsfiddle.net/f2Fcd/
これを試して:
<script type="text/javascript" charset="utf-8">
$(function() {
$('*[data-modal]').click(function(e) {
e.preventDefault();
var href = $(e.target).attr('href');
if (href.indexOf('#') == 0) {
$(href).modal('show');
} else {
$.get(href, function(data) {
$('<div class="modal">' + data + '</div>').modal('show').appendTo('body');
});
}
});
});
</script>
このスニペットは、Ajaxを介してモーダルコンテンツをフェッチするのに役立ちます。
$.get(href, function(response) {
$("#myModal .modal-content").html(response);
});
フェッチされたHTMLresponse
には、通常「モーダルコンテンツ」要素内に存在するdom要素が含まれている必要があることに注意してください。
<div class="modal-header">HEADER</div>
<div class="modal-body">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">Do It</button>
</div>