mel mel - 1 year ago 61
HTML Question

Background become black but the content of the modal doesn't appear

I'm trying to use the modal attribute. When the user click on the image it suppose to display some text I have write the following code.

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


The background become black but there is no content that is display.
I have succeed to use the modal to display the image on which the user is clicking using the following code:

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


Why it doesn't work when I'm trying to display a div with text instead of the image?

Answer Source

You have turned the things around a little bit.

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

Should be

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

i.e reference the id of the modal markup. Or you should actually add bs-example-modal-md as class to #myModal :

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

Both will work. In either case you should use href="#". Here example with #myModal -> http://jsfiddle.net/03m1fzso/ in my opinion the best solution since targeting a class can lead to unclarity when you reexaminate the code, besides the risk of using the class more than once by accident.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download