我在点击 div 时动态附加 HTML。我正在正确获取内容。但是当我附加 HTML 时，UI 变得一团糟。
代码笔:http://codepen.io/anon/pen/QGpRRy
代码:
<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" id="tileFood">
<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" id="tileMedical">
<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" role="document">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
<div id="myModalFood" class="modal 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">
</div>
</div>
</div>
</div>
<div id="myModalMedical" class="modal 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">
</div>
</div>
</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');
var html = "<div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div>";
$("#myModalTraffic .modal-body").html(html);
$("#myModalTraffic .modal-body").append(html);
});
$("#tileFood").click(function () {
$('#myModalFood').modal('show');
});
$("#tileMedical").click(function () {
$('#myModalMedical').modal('show');
});
</script>
</body>
</html>
最佳答案
var html = "<div class=\"row\"> <div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div></div>";
将 col 包裹在 row 中。col 是 float 的。这会导致 UI 对齐问题。 row 通过在伪元素中添加 clear: both; 清除 float
关于javascript - 动态添加时模态弹出内容会溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40740260/