Html 如何修复页面中心的模型弹出窗口
我正在使用页面上的模型弹出窗口。我有一张200行的桌子。当我点击每一行时,模型弹出窗口打开。但当我向下滚动表格并单击行时。模型弹出窗口在页面上向上打开。我希望它总是在页面中央打开,即使我在桌子上向下滚动 我的css是Html 如何修复页面中心的模型弹出窗口,html,css,bootstrap-modal,Html,Css,Bootstrap Modal,我正在使用页面上的模型弹出窗口。我有一张200行的桌子。当我点击每一行时,模型弹出窗口打开。但当我向下滚动表格并单击行时。模型弹出窗口在页面上向上打开。我希望它总是在页面中央打开,即使我在桌子上向下滚动 我的css是 .modal { position: absolute; top: 30px; right: 100px; bottom: 0; left: 0; z-index: 10040; overflow: auto; ov
.modal {
position: absolute;
top: 30px;
right: 100px;
bottom: 0;
left: 0;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}
以下是一个示例(Live:):
.modal{
位置:固定;
排名:0;
左:0;
右:0;
底部:0;
显示:块;
z指数:999;
}
.模态体{
边缘顶部:30px;
左边距:自动;
右边距:自动;
宽度:600px;
最小高度:20px;
}
你的内容在这里
<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>
.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