asp.net - 小屏幕上的 Ajax 模态弹出位置

Question

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

.modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width: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>

Answer 1

@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 上的页面高度，如果它小于您想要的，则将此类添加到 pnlpopup Div。 (这是 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 ) 的帮助，这也可能会有所帮助