11

Twitter ブートストラップ モーダルは、モーダル内に外部 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>
4

3 に答える 3

30

ブートストラップがここで使用しているものであるクロスドメイン AJAX リクエストを送信できないようにする同じオリジンポリシー制限に違反しているため、これは機能しません。したがって、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/

于 2012-08-28T06:19:10.513 に答える
2

これを試して：

<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>
于 2012-08-30T12:20:02.840 に答える
0

このスニペットは、Ajax を介してモーダル コンテンツを取得するのに役立ちます。

$.get(href, function(response) {
     $("#myModal .modal-content").html(response);
});

フェッチされた HTML にresponseは、通常「modal-content」要素内に存在する 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>
于 2014-04-04T11:13:17.157 に答える