[英]how to fix model popup on center of the page
我正在页面上使用模型弹出窗口。 我在页面上有200行的表格。 当我单击每行模型弹出窗口时。 但是当我在桌子上向下滚动并单击行时。 模型弹出窗口在页面上打开。 我希望它始终在页面中央打开,即使我在桌子上向下滚动也是如此。
我的CSS是
.modal {
position: absolute;
top: 30px;
right: 100px;
bottom: 0;
left: 0;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}
这是一个示例(实时: http : //ud.ht/gLlF ):
<div class="modal" role="dialog" style="display: block;">
<div class="modal-parent">
<div class="modal-container">
<div class="modal-contnet">
<span class="modal-text" role="dialog-message">This is text</span>
</div>
</div>
</div>
</div>
这是CSS:
.modal {
z-index: 10000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,.7);
font-family: Tahoma;
overflow: auto;
overflow-y: scroll;
overflow-x: auto;
display: none;
}
.modal-parent {
display: table;
height: 100%;
table-layout: fixed;
width: 100%;
}
.modal-container {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
.modal-contnet {
width: 450px;
display: inline-block;
position: relative;
text-align: right;
background-color: #eee;
margin: 20px 0;
}
.modal-text {
padding: 20px 25px;
font-family: Tahoma;
font-size: 12px;
display: block;
direction: rtl;
text-align: center;
line-height: 20px;
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
z-index: 999;
}
.modal-body {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 600px;
min-height: 20px;
}
<div class="modal">
<div class="modal-body">
<p>Your content here</p>
</div>
</div
试试这个,希望对您有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.