Mobile ModalPopupExtender?

问题

I'm running into an issue with the ModalPopupExtender when displayed on a small screen device. The modals height does not rescale to fit within the viewable window. Because it is centered the top and bottom of the modal gets clipped. Trying to scroll it only scrolls the underlying page not the modal. Anyone run into this or have suggestions on a fix?

回答1:

You have to set Po-pup's panel to use scroll bars. There is 2 way of doing this :

1. Set a fixed height (ex : 500px) and overflow to auto using CSS.
2. Compute the height pup-up using JavaScript, you still have to set the overflow to auto with CSS.

Here an example of a JavaScript function that set the height to 90% of the page's height.

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

回答2:

I decided to handle it using a series of media queries....

.sModalCnt {max-height:480px;overflow-y:auto}
@media only screen and (max-height:600px) {
  .sModalCnt {max-height:380px}
}
@media only screen and (max-height:500px) {
  .sModalCnt {max-height:280px}
}
@media only screen and (max-height:400px) {
  .sModalCnt {max-height:180px}
}
@media only screen and (max-height:300px) {
  .sModalCnt {max-height:80px}
}

来源：https://stackoverflow.com/questions/7237187/mobile-modalpopupextender