模态主体不出现在引导模态中
[英]Modal Body Doesn't appear in bootstrap modal
问题描述
我正在尝试使用引导模态在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>
CodePen： http ：//codepen.io/anon/pen/GNNNqb
3 个解决方案
解决方案1
1 已采纳 2016-11-17 13:06:46
Bootstrap Modal的结构必须符合文档，即
<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>
并且您已将hide类应用于模态。 将其删除，因为它具有样式display: none !important导致模态不出现在屏幕上。
解决方案2
1 2016-11-17 13:08:08
更改
<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 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>
添加这两个div（.modal-dialog和.modal-content）将解决此问题
解决方案3
1 2016-11-17 13:10:12
从模态中删除hide类，在实现之前，请阅读文档 。 模态的结构与文档无关。
您的模态应采用以下结构：
<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>
看一下代码片段：
<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>
希望这可以帮助！
引导模态主体未出现
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.