Bootstrap modal of image gallary just fading the page - html

Question

I'm trying to build a portfolio Page for my business but having trouble getting the Modal to work.
The javascript just executes: without the modal.
Thanks for your help!
<div class="container">
<div class="row">
<ul class="thumbnails">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="images/test.jpg" alt="alt-text"/></li>
</ul>
</div>
</div>
<div id="image1" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
</div>
<div class="modal-body">
<li><img src="images/test.jpg"/></li>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Schließen</button>
</div>
</div>

Answer 1

Thank you for providing an example on jsbin, this makes it much easier for us to help you.
Your problem lies within the first row of this excerpt:
<div id="image1" class="modal hide fade" tabindex="-1"> <!-- here -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
Bootstrap's .hide class is defined like this:
.hide {
display: none !important;
}
This means that whatever happens, elements with the class .hide will stay hidden. This is ensured with the !important rule.
To solve your issue, you either remove the .hide class from div#image1 like this:
<div id="image1" class="modal fade" tabindex="-1"> <!-- no hide class -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
Or you supply an onclick listener which removes the .hide class if a click occurs. Though, this should not be necessary, since Bootstrap's modal is not visible by default.