6

リモート画像をロードするためにTwitterブートストラップのモーダルウィンドウを使用しています

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

私はこれらのドキュメントに従っています

モーダルで画像が正しくレンダリングされません。

代わりに、ごちゃごちゃしたデータが大量に発生します-

Twitterのブートストラップは素晴らしいものではありません

何が起こっていますか？どうすれば修正できますか？

4

3 に答える 3

4

はい、これもありました。私が見つけた答えはここにあります。

次のようなリンクを作成しました。

<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>
于 2013-02-28T16:04:30.903 に答える
3

href を使用してモーダルのリモート コンテンツを指定する場合、Bootstrap は jQuery の load メソッドを使用してコンテンツを取得し、取得したコンテンツをモーダルの body 要素に貼り付けます。つまり、リモート コンテンツ ( href 値) が HTML またはテキストをロードする場合にのみ意味があります。

gif ファイルをテキスト エディタで開き、HTML タグに貼り付けた場合と同じ結果が得られるため、これは予想どおりの結果です。

希望どおりに動作させるには、モーダルで必要な画像を参照する <img> タグを含む HTML ドキュメントを href が指す必要があります。

于 2012-10-26T21:54:49.770 に答える
-1

Mark Robson の投稿 – 「this」を「this.href」に変更:

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

=>

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

（コメントの評判はありません）

于 2015-01-25T21:28:22.030 に答える