Ubiquitous Developers Ubiquitous Developers - 16 days ago 5
CSS Question

Modal Body Doesn't appear in bootstrap modal

I am trying to open modal on div click using bootstrap modal.

When I click on div, screen gets gray-out but modal body doesn't appear

Code:

<html>
<head>
<title></title>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"></link>
<style>
#pageTitle {
display:none;
}
</style>
</head>
<body>
<div class="col-lg-12 text-center">
<h1>Policies</h1>
</div>
<div class="col-lg-12">
<div class="container" id="tiles">
<div class="col-lg-4" style="min-height:80px; background-color:ActiveCaption" id="tileTraffic">
<div class="row">
<div class="col-lg-8">
<h3>Traffic Rules</h3>
</div>
<div class="col-lg-4">
<h1>0</h1>
</div>
</div>
</div>
<div class="col-lg-4" style="min-height:80px; background-color:antiquewhite">
<div class="row">
<div class="col-lg-8">
<h3>Food Policies</h3>
</div>
<div class="col-lg-4">
<h1>0</h1>
</div>
</div>
</div>
<div class="col-lg-4" style="min-height:80px; background-color:cadetblue">
<div class="row">
<div class="col-lg-8">
<h3>Medical Policies</h3>
</div>
<div class="col-lg-4">
<h1>0</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModalTraffic" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#tileTraffic").click(function () {
$('#myModalTraffic').modal('show');
});
</script>
</body>

</html>


CodePen:http://codepen.io/anon/pen/GNNNqb

Answer

The structure of Bootstrap Modal must be according to Docs i.e.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>modal body goes here...</p>
      </div>
   </div>
  </div>
</div>

And you have hide class applied on modal. Remove it because it has style display: none !important causing your modal not to appear on screen.

Comments