How can I make the modal popup scroll its contents with the page?

问题

I've got a modal popup and when it loads contents that are taller than the browser height I am unable to scroll down to view the rest of the information. Instead the background can scroll but the popup won't.

Instead I'd like to have the popup stay put and when the user scrolls up or down it leave the popup in place and let them scroll to the bottom of the contents. If you make a super long post on Facebook the popup works correctly and I'd like to know how I can get this same effect with this control.

回答1:

In the css of your modal popup, set the width of the modalpop up, then set the overflow:auto. That will give you horizontal scrollbar. Example:

.ModalPopupPanel
{
  width:900px;
  overflow:auto;
}

So,when the content width exceed the 900px, the horizontal scrollbar will show up. The same is true for the vertical scrollbar where you need to set the height of the modalpop.

回答2:

You can add a class to the body tag when the popup is open to hide the scrollbar, and remove it when the popup goes away, then your background should be position:fixed and the height should be the window.height() (get it dynamically with JS), and also be overflow:auto.

What happens with all that is that, if the popup is taller than the background, you get a nice scroll bar on the right, and because your body scroll bar is hidden, you see only that one. Also, the page itself doesn't scroll. That's the way Facebook does it with their picture viewer.

回答3:

This script set the popup height to 90% of the screen height, then you could set the overflow:auto;

<script type="text/javascript">
  function pageLoad() {
      $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
  }
    </script>

here a related question I ask and the solution I found.

asp.net ModalPopupExtender : need to show scroll bar when overflow

回答4:

Put style overflow: auto on the container block.

回答5:

You can try this for scrolling modalpopup with its contens: Set the PopupDragHandleControlID pointing it to an empty panel, set Reposition mode = "None" this will keep the modal fixed in the same position as you scroll the page.