背景が黒くなりますが、モーダルの内容は表示されません

Question

私はモーダル属性を使用しようとしています。ユーザーがイメージをクリックすると、テキストを表示すると思いますが、次のコードを記述しています。

<div class="col-md-4 gallery-left"> 
    <a data-toggle="modal" data-target=".bs-example-modal-md" href="#myModal" class="b-link-stripe b-animate-go thickbox"> 
     <img class="img-responsive lot" src="{% static 'img/toothbrush.jpg' %}" alt=""> 
     <div class="b-wrapper"> 
      <div class="b-animate b-from-left b-delay03 "> 
       <i class="plus second"> Picture description </i> 
      </div> 
     </div> 
    </a> 
</div> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
       <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

背景が黒く表示されるコンテンツはありません。

<a data-toggle="modal" data-target=".bs-example-modal-md" href="{% static 'img/toothbrush.jpg' %}" class="b-link-stripe b-animate-go thickbox"> 

私が代わりのテキストをdiv要素を表示しようとしているとき、それは動作しません理由：私は、ユーザーが次のコードを使用してクリックされている画像を表示するモーダルを使用して成功してきた 画像？

Answer 1

あなたは物事を少し回しました。

<a data-toggle="modal" data-target=".bs-example-modal-md" href="#myModal" class="b-link-stripe b-animate-go thickbox"> 

は

<a data-toggle="modal" data-target="#myModal" href="#" class="b-link-stripe b-animate-go thickbox"> 

すなわちモーダルマークアップのidをリファレンスでなければなりません。それとも、実際に#myModalにクラスとしてbs-example-modal-mdを追加する必要があります

<div id="myModal" class="modal fade bs-example-modal-md" role="dialog"> 

の両方が動作します。いずれの場合もhref="#"を使用してください。ここで例を#myModal - >http://jsfiddle.net/03m1fzso/と私の意見では、クラスをターゲットにして以来、最高の解決策は、あなたが偶然によってクラスを2回以上使用するリスクのほか、コードを再検証するときに不潔につながる可能性があります。