ブートストラップ3モーダル（イメージライトボックス）

Question

私は、さまざまな例を見てきましたが、自分のコードを見てきました。私は完全にはわかりませんが、何らかの理由で私が間違っていることを見ることはできません。私はそれを見て、私がばかだと教えてくれる別の人が必要かもしれません。私は何が欠けていますか？

JSフィドル： http://jsfiddle.net/yv47nek3/

コード（HTMLデータ属性を使用して）：フィドルで

<div class="col col-md-6"> 
    <figure> 
    <a data-toggle="modal" data-target="myModal1" href="#"> 
     <img src="http://placehold.it/150" class="img-responsive img-rounded center-block" aria-describedby="year6saratogareads.500x320.jpg1476812731"> 
    </a> 
    <figcaption id="year6saratogareads.500x320.jpg1476812731" class="text-center">Image Description</figcaption> 
    </figure> 
</div> 
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 
     </button> 
     <h4 class="modal-title" id="myModalLabel1">Image 1</h4> 
     </div> 
     <div class="modal-body"> 
     <img src="http://placehold.it/500"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

と同様に、ブートストラップCSSやJSが存在しています。しかし、画像をクリックしてもモーダルは開かないようです。ブートストラップのモーダルは非常にシンプルです。私はそれをどのように乱したかについて完全にはわかりません。助けて？

Answer 1

ブートストラップのドキュメントに入力ミスがあります。データターゲットには、ターゲットとするHTML ID属性を識別する＃が必要です。

は経由見つかり： bootstrap 3 modal window not working

にはまだ別の問題がここだし、それは明らかにモーダルがリンクから活性化され、そのリンクがHREFタグで何かが含まれている場合、ブートストラップはににリンクされたデータをロードしようとしていることです（データターゲットを無視して）モーダルの本体。これは、バイナリデータを（この場合は）ascii媒体に表示しようとすることに終わります。ロード/変換中にブラウザが数回クラッシュしました。

HTMLデータ属性のみを使用するには、アンカータグのHREFを削除する必要があります（JSが破損した場合やユーザーが使用できない場合にバックアップを無効にする必要があります）。それ以外の場合は、モーダルをアクティブにするには、データ属性の代わりにJSを使用する必要があります。