模态体不会出现在bootstrap模式中。

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

我试着打开div点击使用bootstrap模式。

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

当我点击div的时候，屏幕会变成灰色，但是modal body不会出现。

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

3 个解决方案

#1

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

Bootstrap模态的结构必须符合文档的要求。

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

然后隐藏类应用于modal。删除它，因为它有样式显示:没有!重要的导致您的模式不出现在屏幕上。

#2

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

添加这两个div(。modal-dialog和.modal-content将解决这个问题。

#3

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!

希望这可以帮助!

#1