移动ModalPopupExtender？

Question

在小屏幕设备上显示ModalPopupExtender时，我遇到了一个问题。模态高度不会重新缩放以适应可视窗口。因为它居中，所以模式的顶部和底部被裁剪。尝试滚动它只会滚动底层页面，而不是模式页面。有没有人遇到过这个问题，或者有什么建议？

Answer 1

我决定通过一系列媒体查询来处理它……

.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}
}

Answer 2

您必须将Po-pup的面板设置为使用滚动条。有两种方法可以做到这点：

1. 使用CSS设置固定的height (例如：500px)并将overflow设置为auto。
2. 使用JavaScript计算高度设置，您仍然需要使用CSS将overflow设置为auto。

下面是一个JavaScript函数的示例，它将高度设置为页面高度的90%。

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