我有一个主页面上有一些内容.然后我有一个弹出的模态比屏幕本身长,所以我必须滚动才能看到它.我需要做什么才能使我的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之外,整个页面是不是可滚动的？如果是这样你可以尝试位置：固定;在页面上.模态必须在位置之外：绝对;
- <!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>
