Question

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

.modalBackground { 背景色：灰色; 滤波器：α（不透明度= 70）; 不透明度：0.7; } .modalPopup { 背景色：#ffffdd; 边框宽度：3px的; 边框样式：固体; 边框颜色：灰色; 填充：3px的; 宽度：250像素; }

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

Answer 1

@focus：我正在使用Jquery将ModalPopup附加到一个按钮，但我用来检查内部高度的代码然后将类添加到我的面板中：

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上的页面高度，如果它低于您想要的值，请将此类添加到pnlpopup Div。（这很容易解决IMO）

更新

在主题部分的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）

的帮助，这也可能有所帮助

小屏幕上的Ajax模式弹出位置

1 个答案: