How to make a modal popup scroll content from a page?

Question

I have a modal popup, and when it loads content that is higher than the height of the browser, I cannot scroll down to view the rest of the information. Instead, the background may scroll, but the popup will not.

Instead, I would like the popup to remain, and when the user scrolls up or down, it leaves the popup in place and allows them to scroll the bottom of the content. If you make a super long Facebook post, the popup works correctly and I would like to know how I can get this effect with this control.

Answer 1

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

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

So, when the width of the content exceeds 900 pixels, a horizontal scrollbar appears. The same is true for the vertical scrollbar, where you need to set the height of the modal port.

Answer 2

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

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

here is the related question that I am asking and the solution that I found.

asp.net ModalPopupExtender: need to show scrollbar when overflowing

Answer 3

You can add the class to the body tag when the popup is open to hide the scroll bar and delete it when the popup disappears, then your background should be fixed and the height should be window.height () (get it dynamically with using JS) and also be overflowing: auto.

What happens to all is that if the pop-up window is above the background, you get a good scroll bar on the right, and since the scroll bar of your body is hidden, you only see one. In addition, the page itself does not scroll. The way Facebook does this with its image viewer.

Answer 4

Put the overflow: auto style in the container block.

Answer 5

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

Answer 6

Here is a simple and best working solution.

Add this class to your modal popup page.

 body.modal-open { overflow: auto; }