0

我在 Asp.net/C# Web 应用程序上有以下模式弹出窗口。模态弹出窗口包含多个占位符。当我尝试在小屏幕或 ipad/iphone/ipod 屏幕上访问模式弹出窗口时，会出现我的问题。该页面显示模式弹出窗口的一半，因此无法访问顶部的信息。我使用了overflow:auto;/以下解决方案：Mobile ModalPopupExtender? 和许多其他人，但没有解决我的问题。

.modalBackground { 背景颜色：灰色；过滤器：阿尔法（不透明度= 70）；不透明度：0.7；} .modalPopup { 背景颜色：#ffffdd; 边框宽度：3px；边框样式：实心；边框颜色：灰色；填充：3px；宽度：250px；}

<asp:Panel ID="Panel1" runat="server"></asp:Panel>
    <asp:Button  ID="btnShowPopup" runat="server" style="display:none" /> 

              <asp:ModalPopupExtender ID="ModalPopupExtender1" PopupDragHandleControlID="Panel1" RepositionMode="None" runat="server" PopupControlID="pnlpopup" 
TargetControlID="btnShowPopup" CancelControlID="btnCancel"
    DropShadow="true"   
 BackgroundCssClass="modalBackground">

        </asp:ModalPopupExtender>

        <asp:Panel ID="pnlpopup" runat="server" BackColor="LightGray" style="display:none;"
             CssClass="modalPopup" Width="650px" >
               <asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
                                <ContentTemplate>
</ContentTemplate>
                                </asp:UpdatePanel>
                      <asp:Button ID="btnCancel" Height="30px" Width="160px" runat="server" Text="Cancel" />
                     </asp:Panel>
4

1 回答 1

2

@focus：当我使用 Jquery 将 ModalPopup 附加到按钮时，我用来检查 innerheight 然后将类添加到面板的代码是：

var height = window.innerHeight;
if (height < 1000) {        
    $("#pnlpopup").addClass("PanelWithScroll");       
}

您需要在 javascript 中添加上述代码，并且需要在ModalPopupExtender点击时调用。

PanelWithScroll是一个 CSS 类：

.PanelWithScroll{
height:250px;
overflow:scroll;
overflow-x:hidden;
}

同样，如果您也有宽度问题，您也可以检查宽度（http://responsejs.com/labs/dimensions/）并更改类PanelWithScroll

您可以做的其他事情是检查 page_load 上的页面高度，如果它小于您想要的，请将此类添加到pnlpopupDiv。（这是IMO的简单解决方案）

更新：

在 head 部分的 HTML 代码中添加给定的 javascript

$(document).ready(function () {
var height = window.innerHeight;
if (height < 1000) {        
    $("#pnlpopup").addClass("PanelWithScroll");       
   }
}

$(document).ready只会在您的页面完全呈现后运行。如果您需要有关如何将脚本放入 html ( http://javascript.info/tutorial/adding-script-html )的帮助，这也可能会有所帮助

于 2013-09-17T11:23:06.917 回答