ASP.NET modal popupextender - scroll with page behind

Hi experts,

I am using several ASP.NET modal popupextenders to display various information on my site. They all work fine, but one thing that I dislike is that if the modal is open and I scroll the mouse, the modal stays where it is and the page behind (the browser window) scrolls instead. I would prefer the modal to scroll WITH the page.

Can this be done?


LVL 11
Jon WinterburnAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

What do you mean? The modal is always visible on the top, right? no matter how the page scrolls? You can also set the properties for modalpopupextender:
•X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
•Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
Jon WinterburnAuthor Commented:
No, I mean the modal is visible in the centre of the page, which is perfect. But if I scroll the mousewheel, the modal stays exactly where it is, yet the page behind (greyed out and inaccessible whilst modal is visible) scrolls. I want the modal to scroll with the page.
The modal is scrolling with the page, that is why it is visible. Say you have a very long page....When the modal is open, you scroll the background page, the modal scrolls with the page and you still see the modal. Otherwise, you would just see the background page and the modal would be sitting somewhere on the top...
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Jon WinterburnAuthor Commented:
That's the point - it's not scrolling with the page, it's fixed. I want it to be like you said - where if you scrolled a loooong page, the modal would be sitting somewhere on top. Thing is, the pages I use this on are not long, so that's not an issue. But the problem occurs if the user has their browser not full size (perhaps half-size) or their resolution low. I want the user to be able to scroll and the modal move with the page.
The modal will show always on the top. Now you can set the X and Y co-ordinates as mentioned above and that will make the modal visible no matter what the browser size....
But the problem occurs if the user has their browser not full size (perhaps half-size) or their resolution low ----------->

In your Modalpopextender, set the RepositionMode

Open in new window

Jon WinterburnAuthor Commented:
Thanks masterpass, but it doesn't seem to make any difference.

An example of what I want to achieve is visible on one of my favourite websites. Look at: and click on any picture, then scroll the mouse. You will see that the popup is attached to the background window, so it scrolls WITH the background window, rather than what my modalpopupextender does which is stay put in one location whilst the background window scrolls.
Give RepositionMode="None"

Now in the panel, apply the style like this (panel will the same as PopupControlID of the modalpopupextender)

style="position:absolute !important;"

NB: This won't work in IE7 as expected ...

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.