Fatal编程技术网
  • javascript/
  • Javascript 模态体不'；t出现在引导模式中

Javascript 模态体不'；t出现在引导模式中

javascript jquery html css twitter-bootstrap

Javascript 模态体不'；t出现在引导模式中,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在尝试使用引导模式在div单击时打开模式 当我点击div时，屏幕变灰，但模态体并没有出现 代码： <html> <head> <title></title> <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesh

我正在尝试使用引导模式在div单击时打开模式

当我点击div时，屏幕变灰，但模态体并没有出现

代码：

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


#页面标题{
显示：无；
}
政策
交通规则
0
粮食政策
0
医疗政策
0
一个好身体

$（“#tileTraffic”）。单击（函数（）{
$（'myModalTraffic'）.modal（'show'）；
});
代码笔：

引导模式的结构必须符合


模态体在这里
并且在modal上应用了
hide
类。删除它，因为它具有样式
display:none！重要信息
导致您的模式不出现在屏幕上。

引导模式的结构必须符合


模态体在这里
并且在modal上应用了
hide
类。删除它，因为它具有样式
display:none！重要信息
导致您的模式不显示在屏幕上。

更改

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


一个好身体
为了


一个好身体
添加这两个div（.modal dialog和.modal content）将解决此问题

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


一个好身体
为了


一个好身体
添加这两个div（.modal dialog和.modal content）将解决问题

从您的modal中删除
隐藏
类，请在实现之前阅读。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>




一个好身体



请看一下代码片段：




政策
交通规则
0
粮食政策
0
医疗政策
0
一个好身体


删除
隐藏
类，在实现之前请阅读。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>




一个好身体



请看一下代码片段：




政策
交通规则
0
粮食政策
0
医疗政策
0
一个好身体


class=“modal fade”足够吗？@UbiquitousDevelopers是class=“modal fade”足够吗？@UbiquitousDevelopers是