Hintergrund wird schwarz, aber der Inhalt des Modals erscheint nicht

Question

Ich versuche, das modale Attribut zu verwenden. Wenn der Benutzer auf das Bild klickt, um etwas Text anzuzeigen, habe ich den folgenden Code geschrieben.

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

Der Hintergrund wird schwarz, aber es gibt keinen Inhalt, der angezeigt wird. Ich habe erfolgreich die modalen zu verwenden, um das Bild anzuzeigen, auf das der Benutzer mit dem folgenden Code wird klicken:

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

Warum funktioniert es nicht, wenn ich versuche, ein div mit Text von der Stelle angezeigt werden Bild?

Answer 1

Sie haben die Dinge ein wenig umgedreht.

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

Sollte

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

heißt die id des modalen Markup Referenz sein. Oder Sie sollten eigentlich bs-example-modal-md als Klasse #myModal hinzufügen:

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

Beide arbeiten. In jedem Fall sollten Sie href="#" verwenden. Hier ein Beispiel mit #myModal ->http://jsfiddle.net/03m1fzso/ meiner Meinung nach die beste Lösung, da das Targeting einer Klasse zu Unklarheit führen kann, wenn Sie den Code erneut prüfen, neben dem Risiko, die Klasse mehr als einmal versehentlich zu verwenden.