8

いくつかのコンテンツを含むメインページがあります。次に、画面自体よりも長いモーダルがポップアップ表示されるので、スクロールして表示する必要があります。divページ全体ではなくモーダルスクロールのみを作成するには、CSSに対して何をする必要がありますか？

これがモーダルの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>
4

1 に答える 1

4

モーダルdivを除いて、ページ全体をスクロールできませんか？もしそうなら、position：fixedを試すことができます。ページ上。モーダルはposition：absoluteで外側にある必要があります。

<!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>

ここでフィドル

于 2013-02-26T21:32:55.033 に答える