Twitter Bootstrap Question posted in

Modal Body Doesn't appear in bootstrap modal – Twitter bootstrap

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Change

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

    For

        <div id="myModalTraffic" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
</div>
</div>
    </div>

    Adding those two divs (.modal-dialog and .modal-content) will solve the issue

    Login or Signup to reply.
  3. 0

    Remove hide class from you modal, and please read documentation before implementing things. The structure of modal is not according to the documentation.

    Your modal should be structured like:

    <div id="myModalTraffic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
        <p>One fine body…</p>
        </div>
    </div>
  </div>
</div>

    Have a look at the snippet:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <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" data-toggle="modal" data-target="#myModalTraffic">
                <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 fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        </div>
      </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search