Rectangle 27 0

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


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.

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.

Note
Rectangle 27 0

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


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

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:

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.

That solve the issue if the browser screen is at least 900px. For a solution with a popup that could span to fill that page, see my Answer.

Note
Rectangle 27 0

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


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

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

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

Note
Rectangle 27 0

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


Put style overflow: auto on the container block.

When you say container block what are you refering to? Also have you actually testest this? Put two pages of content into a panel that is borught up via the modal popup and without having scroll bars on the panel itself you can see everything by scrolling the page?

i'm asking because what you suggested does not work when I try it. I know that I can scroll the div and panels but that is not what I am asking about.

Note
Rectangle 27 0

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


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.

Note
Rectangle 27 0

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


Put style overflow: auto on the container block.

When you say container block what are you refering to? Also have you actually testest this? Put two pages of content into a panel that is borught up via the modal popup and without having scroll bars on the panel itself you can see everything by scrolling the page?

i'm asking because what you suggested does not work when I try it. I know that I can scroll the div and panels but that is not what I am asking about.

Note
Rectangle 27 0

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


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

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

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

Note
Rectangle 27 0

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


Note
Rectangle 27 0

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


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

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:

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.

That solve the issue if the browser screen is at least 900px. For a solution with a popup that could span to fill that page, see my Answer.

Note
Rectangle 27 0

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


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.

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.

Note