Twitterowe modularne adresy URL nie działają

Question

Modem bootstrap na Twitterze nie ładuje zewnętrznych adresów wewnątrz modalu.

Przykładowy 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

To nie działa, ponieważ naruszają ten sam origin policy restriction który uniemożliwia wysyłanie żądań AJAX domen krzyż, który jest co bootstrap korzysta tutaj. Tak więc jedną z możliwości jest załadowanie zawartości zewnętrznej w produkt :

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

Uważajcie jednak, że niektóre strony (takie jak Google, stackoverflow, Facebook, ...) nie mogą być ładowane do iframe. Ustawiają one nagłówek HTTP odpowiedzi X-Frame-Options na SAMEORIGIN, a także sprawdzają, czy są one załadowane wewnątrz iframe.

Można zobaczyć go w akcji w tym skrzypce: http://jsfiddle.net/f2Fcd/

Answer 2

Spróbuj tego:

<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

Ten fragment pomaga pobierania modalne treści przez Ajax:

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

pamiętać , że pobrany kod HTML, musi zawierać elementy-domki zwykle obecne w elemencie "modalnym":

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