javascript - twitter bootstrap modal nem jeleníti meg a távoli képet

A Twitter Bootstrap modális ablakát használom egy távoli kép betöltésére

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

Ezeket a dokumentumokat követem

A kép nem jelenik meg helyesen a modálban.

Ehelyett egy rakás összekuszált adatot kapok.

Mi történik? Hogyan tudom megoldani?

Válasz #1

Igen, nekem is volt ilyen. A választ, amit találtam, itt találod.

Így hoztam létre egy linket:

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

Válasz #2

Amikor az href-et távoli tartalom megadására használjuk egy modálhoz, a Bootstrap a jQuery load metódusát használja a tartalom lekérésére, majd a lekért tartalmat a modál body elemébe helyezi. Röviden, csak akkor van értelme, ha a távoli tartalom (az href értéke) HTML-t vagy szöveget tölt be.

Amit látsz, az várható, mivel ugyanaz történne, mintha megnyitnád a gif fájlt egy szövegszerkesztőben, és egyszerűen beillesztenéd egy HTML címkébe.

Ahhoz, hogy úgy működjön, ahogy szeretnéd, a href-nek egy olyan HTML dokumentumra kell mutatnia, amely tartalmaz egy <img> taget, ami hivatkozik a kívánt képre a modalban.