Home/ Questions/Q 5992467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:32:09+00:00

The entire popup-div is visible, and when I scroll vertically, it follows. Only half

  • 0

The entire popup-div is visible, and when I scroll vertically, it follows.

enter image description here

Only half of the popup-div is visible, and when I scroll vertically it follows, but it’s impossible to view the second part of the popup-div. How can this be achieved?

enter image description here

css code:

  .popup
{
    position:fixed;
    z-index:9002;
    background-color:#FFFFFF;
    border:solid 1px #000000;
    top: 20%;
    left: 20%;
    overflow: auto;
}
.popupbackground
{
    background-color:#111;
    opacity:0.65;
    filter:alpha(opacity=65);
    position:fixed;
    z-index: 500;
    top:0px;
    left:0px;
    width: 100%;
     height: 100%;
}

I’m working with ASP.NET, if the code-behind is needed to answer this question I will provide it.

I have read about solutions such as setting the overflow parameter to auto or scroll, but haven’t gotten that to work.

Update follows below:

Now the popup is scrollable vertically as wanted, but only if the scrollbar is visible horizontally.
enter image description here

Here, it’s not possible to scroll vertically because the scrollbar is not visible, and scrolling horizontally in the browser just forces the popupdiv to follow along.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try this code (the content of the pupup is just for testing):

    <html>
<head>
<style>
.popup
{
    position:fixed;
    z-index:9002;
    background-color:#FFFFFF;
    border:solid 1px #000000;
    top:10%;
    left: 20%;
    overflow: auto;
    height:80%;
    width:40%;
}

.popupbackground
{
    background-color:#111;
    opacity:0.65;
    filter:alpha(opacity=65);
    position:fixed;
    z-index: 0;
    top:0px;
    left:0px;
    width: 100%;
     height: 100%;
}


</style>
</head>
<body>
<div class="popupbackground">
</div>
<div class="popup">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>
</body>
</html>
    • 0