2017-12-24 13 views
0

*ポスト
私の周りを検索し、複数の画像のために1ページにモーダルを追加への潜在的な答えを発見したを繰り返します。私が見つけたこの解決策は私に私のモーダルを与えていますが、モーダルがポップアップするとイメージが表示されず、 "img src"を表示しているコンソールが "(不明)"です。モーダル

私が見つけた解決策:

$(document).ready(function() { 
 
     $('#myModal').on('show.bs.modal', function (e) { 
 
      var image = $(e.relatedTarget).attr('src'); 
 
      $(".img-responsive").attr("src", image); 
 
     }); 
 
});
<img id="1" data-toggle="modal" data-target="#myModal" class="image" src="/images/hieroglyphics/9.jpg"> 
 

 

 

 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body"> 
 
       <img class="img-responsive" src=""/> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

任意の助けいただければ幸いです!ありがとう!

答えて

1

コードが正しく動作しているかどうかを確認できます。
ここにあなたのコードがあります。
https://jsfiddle.net/jammer99/y0w1t95u/

モーダルを開くその他の項目はありますか?

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (e) { 
     var image = $(e.relatedTarget).attr('src'); 
     $(".img-responsive").attr("src", image); 
    }); 
}); 

コンソールのスクリーンショットを貼り付けることはできますか?他のエラーがあるかどうかを確認する

+0

他のエラーは発生していません。私は、このJavascriptがJQuery経由で実行されているか、間違っていることを修正していますか? –

+0

私は実際にBootstrap css CDNを追加して、今このエラーをスローしています... "Uncaught SyntaxError:予期しないトークン{bootstrap.min.css:5" –

+0

ブートストラップ3.3.7を使用していますか?あなたはあなたの問題でフィドルを更新できますか? –

関連する問題