移动 ModalPopupExtender？答案

【问题标题】：Mobile ModalPopupExtender?移动 ModalPopupExtender？
【发布时间】：2011-08-29 23:31:38
【问题描述】：

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

【问题讨论】：

标签： asp.net css mobile modalpopupextender

【解决方案1】：

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

使用 CSS 将固定的height（例如：500px）和overflow 设置为auto。
使用 JavaScript 计算高度 pup-up，您仍然需要使用 CSS 将 overflow 设置为 auto。

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

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

【讨论】：

我选择了 1 号的变体。

【解决方案2】：

我决定使用一系列媒体查询来处理它......

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

【讨论】：