Twitter Bootstrap modalne nie wyświetla obrazu zdalnego

Question

używam modalne okno Twitter Bootstrap do załadowania obrazu zdalnego

<a href="assets/500x300.gif" data-target="#image-preview" data-toggle="modal"><img alt="250x150" src="/assets/250x150.gif"></a> 

jestem following these docs

Obraz nie jest renderowania poprawnie w modalnej.

uzyskać obciążenie pomieszane danych zamiast -

co się dzieje? Jak mogę naprawić?

Answer 1

Podczas używania href do określania zawartości zdalnej dla modalu, Bootstrap używa metody ładowania jQuery do pobierania treści, a następnie umieszcza pobraną zawartość w elemencie body modalu. Krótko mówiąc, ma sens tylko wtedy, gdy zawartość zdalna (wartość href) ładuje HTML lub tekst.

To, co widzisz, jest oczekiwane, ponieważ jest to to samo, co się stanie, jeśli otworzysz plik gif w edytorze tekstu i wkleisz go do tagu HTML.

Aby działał tak, jak chcesz, href musi wskazywać na dokument HTML zawierający tag, który odwołuje się do obrazu, który chcesz w modalu.

Answer 2

Tak, też to miałem. Odpowiedź, którą znalazłem, to here.

Stworzyłem linka takiego:

<a href="gallery/blue.jpg" class="thumbnail img_modal"> 

//handler for link 
$('.img_modal').on('click', function(e) { 
    e.preventDefault(); 
    $("#modal_img_target").attr("src", this); 
    $('#modal').modal('show'); 
}); 

//and modal code here 

<div id="modal" class="modal hide fade" 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">Title to go here</h3> 
    </div> 
    <div class="modal-body"> 
     <img id="modal_img_target"> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 

Answer 3

W stanowisku Mark Robson - zmiany 'to' do 'this.href':

$("#modal_img_target").attr("src", this);

=>

$("#modal_img_target").attr("src", this.href); 

(Nie mam reputacji w komentarzu)