Gli URL esterni modali bootstrap di Twitter non funzionano

Question

Il modal bootstrap di Twitter non carica gli URL esterni all'interno del modal.

codice di esempio: 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

Questo non funziona perché si stanno violando la stessa origin policy restriction che ti impedisce di inviare croce domini richieste AJAX che è ciò che bootstrap sta usando qui. Quindi, una possibilità è quella di caricare il contenuto esterno in un :

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

Attenzione però che alcuni siti (come Google, StackOverflow, facebook, ...) non possono essere caricati in un iframe. Stanno impostando l'intestazione HTTP di risposta X-Frame-Options su SAMEORIGIN e controllano anche se sono caricati all'interno di uno iframe.

Potete vederlo in azione in questo violino: http://jsfiddle.net/f2Fcd/

Answer 2

Prova questo:

<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

Questo frammento aiuta nel recupero il contenuto modale tramite Ajax:

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

Tenete a mente , che l'HTML response scaricato, deve contenere gli elementi dom normalmente presenti all'interno dell'elemento "modal-content":

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