【发布时间】：2016-06-06 11:11:33
【问题描述】：
我设置了一个模态窗口，但是当按下激活它的按钮时，显示的模态被切成两半，like this. 在一个较小的窗口中，模态显示得很好。对不起，代码有点乱。
<!-- index.html -->
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>OAMK Opinnäytetyöt</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#todo-list { margin-bottom:30px; }
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>OAMK Opinnäytetyöt</h1>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg text-center" data-toggle="modal" data-target="#myModal">Lisää uusi aihe</button>
<!-- TODO LIST -->
<div id="todo-list" class="row">
<div class="col-sm-10>
<!-- LOOP OVER THE TODOS IN $scope.todos -->
<div class="checkbox" ng-repeat="todo in todos">
<label>
<h1>
<input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.aihe }}
</h1>
</label>
<br>
{{ todo.kuvaus }}
</div>
</div>
</div>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><!-- FORM TO CREATE TODOS -->
<div id="todo-form" class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<form>
<div class="form-group">
<!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
<input type="text" maxlength="50" class="form-control input-lg" placeholder="Aihe (max. 50 merkkiä)" ng-model="formData.aihe">
<input type="text" maxlength="255"class="form-control input-lg" placeholder="Kuvaus (max. 255 merkkiä)" ng-model="formData.kuvaus">
</div>
<!-- createToDo() WILL CREATE NEW TODOS -->
<button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal" ng-click="createTodo()">Lisää</button>
</form>
</div>
</div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
#myModal上的 CSS 是否会影响它？ -
没有 CSS 模态仍然减半，只是在不同的地方：i.stack.imgur.com/srpAf.png
-
关于您的更新，使用这个确切的代码，它可以正常工作......不是吗？我无法重现您的错误...imgur.com/CD9yQw7 这是在 Chrome 中 - 已最大化。它在 I Explorer 中也能正常工作
-
好的，那么问题出在其他地方。我将整个 index.html 代码添加到 OP。
-
我注意到的第一件事是您有
bootstrap.min.css的冗余负载。删除最后一个（版本 3.0.0）并保留第一个（版本 3.3.6）！它对我来说仍然很好，所以我想它与你的 JS 或我刚才提到的 CSS 有关（你是否曾经在某处覆盖模态）？？？您是否尝试过仅使用您在此处提供的代码制作一个空的工作区？看起来效果不错！
标签： javascript jquery html css twitter-bootstrap