I am encountering an issue with the Twitter Bootstrap modal while trying to display post details on WordPress. The problem is that when the modal opens, the entire screen turns grey and nothing in the modal is clickable. I can only exit this mode by pressing the "esc" key. I suspect it may be a JavaScript problem, but I cannot seem to pinpoint the exact issue. I have already loaded jQuery, bootstrap.js, and bootstrap.css.
<a href="#" data-toggle="modal" data-target="#myModal-39">
<div class="col-lg-4 imgWrap">
<img width="500" height="332" src="img/myimage.jpg" class="attachment-post-thumbnail wp-post-image" alt="myimage" /> <h2><span>Title 39</span></h2>
<p class="imgDescription">Description 39</p>
</div><!-- /.col-lg-4 -->
</a>
<!-- Modal -->
<div class="modal fade" id="myModal-39" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-39" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel-39">Title 39</h4>
</div>
<div class="modal-body">
<img width="500" height="332" src="img/myimage.jpg" class="attachment-post-thumbnail wp-post-image" alt="marrakech" /> </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Fiddle: http://jsfiddle.net/8E8En/
Is there something I may have overlooked? Thanks,