Twitter bootstrap Twitter引导模式外部URL不工作

Twitter引导模式不会在模式内加载外部URL

示例代码：

×
模态头

这不起作用，因为您违反了阻止您发送跨域AJAX请求的相同规则，这正是bootstrap在这里使用的。因此，一种可能性是将外部内容加载到

：

$('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>');
});​

$（'a.btn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var url=$（this.attr（'href'）；
$（'.modal body'）.html（''）；
});​

请注意，有些网站（如谷歌、stackoverflow、facebook等）无法加载到iframe中。他们正在将

X-Frame-Options

response HTTP头设置为

SAMEORIGIN

，并检查它们是否加载到

iframe

中

你可以在这把小提琴中看到它的作用：

试试这个：

<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>

$（函数（）{
$（'*[数据模式]'）。单击（函数（e）{
e、 预防默认值（）；
var href=$（e.target.attr（'href'）；
如果（href.indexOf（'#'）==0）{
$（href）.modal（'show'）；
}否则{
$.get（href，函数（数据）{
$（''+数据+''）.modal（'show'）.appendTo（'body'）；
});
}
});
});

此代码片段有助于通过Ajax获取模式内容：

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

请记住，获取的HTML

响应

必须包含通常存在于“modal content”元素中的dom元素：

标题
身体
接近
做吧

谢谢您的回复。我使用外部url检查这个问题是js FIDLE。我想加载内部asp.net mvc视图以加载内部模型。这对我不管用。出于示例目的，我使用helloworld.html谢谢，Naveen如果要加载内部ASP.NET MVC视图，则不需要iframe。只要确保url是正确的。例如，如果将

href

中的url直接放在浏览器地址栏中，会发生什么情况？它起作用了吗？

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

 <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>