[英]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.