如何修复页面中心的模型弹出窗口
如何修复页面中心的模型弹出窗口
提问于 2017-02-17 03:07:09
我正在使用页面上的模型弹出窗口。我在页面上有200行的表格。当我单击每一行时，模型弹出窗口打开。但是当我向下滚动表格并点击row时。模型弹出窗口在页面上向上打开。我希望它总是在页面的中心打开，即使我在表格上向下滚动。
我的css是
.modal {
position: absolute;
top: 30px;
right: 100px;
bottom: 0;
left: 0;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-17 03:17:55
下面是一个示例(Live：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;
}Stack Overflow用户
发布于 2017-02-17 03:20:12
.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试试这个，希望能对你有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42282597
复制相关文章
相似问题
腾讯云开发者
