Twitter bootstrap modal harici URL'ler çalışmıyor

Question

Twitter bootstrap modal, model içindeki harici URL'leri yüklemiyor.

Örnek Kod: 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> 

Answer 1

Burada kullanarak hangi önyükleme olan alanları arası AJAX istekleri göndermek engeller aynı origin policy restriction ihlal Bunun nedeni çalışmaz. Yani bir ihtimal bir içine harici içerik yüklemek için geçerli:

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

bazı siteler (örneğin google, stackoverflow gibi facebook, ...) bir iframe yüklenen edilemez olsa uyardı. SAMEORIGIN'a X-Frame-Options yanıt HTTP üstbilgisini ayarlıyorlar ve ayrıca bir iframe içine yüklenip yüklenmediklerini de kontrol ediyorlar. Bu keman eylem görebiliyorum

: Deneyin http://jsfiddle.net/f2Fcd/

Answer 2

bu: akılda

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

tutun: Bu pasajı Ajax yoluyla modal içerik getirirken yardımcı olur

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

Answer 3

HTML response öğesinin getirildiği, "modal içerik" öğesinin içinde normal olarak bulunan dom öğelerini içermelidir:

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