我有一个主页面,上面有一些内容.然后我有一个弹出的模态比屏幕本身长,所以我必须滚动才能看到它.我需要对CSS做什么才能只进行模态div滚动而不是整个页面？
这是模态的CSS
#overlay {
visibility: hidden;
position: absolute;
left: 45%;
width:auto;
border:1px solid #A17E13;
height:auto;
text-align:left;
z-index: 1000;
}
#overlay div {
background-color:#FCFBEC;
}
这是HTML:
<html><body>
<div>main page</div>
<div id="overlay">
<div>
<div>
<asp:Label ID="test">Text for modal here</asp:Label>
</div>
</div>
</div>
</body></html>
除了模态 div 之外，整个页面都不可滚动吗？如果是这样你可以尝试position:fixed; 在页面上。模态必须位于位置：绝对的外部；
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#overlay {
/*visibility: hidden;*/
position: fixed;
left: 45%;
width:auto;
border:1px solid #A17E13;
height:900px;
text-align:left;
background-color:orange;
}
.scroller {
height:3000px;
width:400px;
background-color:green;
}
</style>
</head>
<body>
<div id="overlay">
this is not moving
</div>
<div>
<div class="scroller">
<asp:Label ID="test">This is moving if big enough</asp:Label>
</div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
5233 次 |
| 最近记录： |