我在一个弹出框中有一个div。我遇到的问题是当我点击“添加行”时,它会创建另一个带有行的div,并扩展顶部和底部。随着添加了几行,该div就会离开屏幕。请参见截图。
注意:query-row元素是一个angular指令,所以您看不到该指令的模板(其中包括实际字段和添加行按钮)。但在这种情况下,这并不重要。
HTML
HTML
<div class="ng-modal ng-cloak" ng-show="true">
<div class="ng-modal-overlay">
<div class="ng-modal-close">
<div class="ng-modal-close-x">CLOSE</div>
</div>
<div class="ng-modal-dialog">
<div class="ng-modal-dialog-content">
<div class="document-content-wrapper">
<div class="document-content">
<div ng-repeat="row in rows">
<query-row rows="rows" remove-row="removeRow(row)" add-row="addRow()"></query-row>
</div>
<div class="row">
<button ng-click="submit()" class="btn btn-primary">Submit</button>
<button ng-click="cancel()" class="btn btn-info">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.ng-modal {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ng-modal-overlay {
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #282828;
opacity: 0.9;
}
.ng-modal-dialog {
z-index: 10000;
position: absolute;
top: 164px;
left: 53%;
width: 800px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
padding: 10px;
background-color:#FFF;
}
.ng-modal-dialog-content {
overflow: hidden;
height: 100%;
}
.ng-modal-dialog-input {
margin: 0px;
padding: 5px;
font-size: 36px;
width: 100%;
border: none;
background-color: #fff;
outline: 0;
color: #000;
font-weight:700;
}
.ng-modal-close {
position: absolute;
top: 15px;
right: 28px;
}
.ng-modal-close-x {
font-family: Arial, sans-serif;
display: inline-block;
cursor: pointer;
float: right;
font-size: 18px;
color: #fff;
}
.ng-modal-title {
font-weight: bold;
font-size: 200%;
display: block;
margin-bottom: 10px;
padding-bottom: 7px;
border-bottom: solid 1px #999;
}
Plunker示例:http://plnkr.co/edit/RFNsrC
第一张截图只有一行。 截图1 第二张截图添加了3行,您可以看到模态框在顶部超出了屏幕。我希望它保持固定在顶部,并仅向底部增长 截图2