Ajax modal popup position on small screens - asp.net

Question

I have the following modal popup on a Asp.net/C# web application. The modal popup holds multiple placeholders. My problem occurs when I am trying to access the modal popup on small screens or on ipad/iphone/ipod screens. The page display the half of the modal popup so the information in the top are inaccessible. I have used overflow:auto;/ the following solution: Mobile ModalPopupExtender? and many others but doesn’t solved my problem.
.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: As I am using Jquery to attach ModalPopup to a button but code I used to check innerheight and then add class to my panel is:
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
You need to add above code in javascript and this need to be called on ModalPopupExtender click.
PanelWithScroll is a css class:
.PanelWithScroll{
height:250px;
overflow:scroll;
overflow-x:hidden;
}
Similarly, if you have problem with width too, you can check width too (http://responsejs.com/labs/dimensions/) and change class PanelWithScroll
Other thing you can do is check page height on page_load and if its less than what you want, add this class to pnlpopup Div. (This is easy solution IMO)
Update:
Add given javascript in your HTML Code in head section
$(document).ready(function () {
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
}
$(document).ready will only run after your page has wholly rendered. This may also help if you need help on how to put script in html (http://javascript.info/tutorial/adding-script-html)