i have made a webpage especially a form to view on android device. i also made a custom date picker which opens on a popup when corresponding textbox is clicked. but in browser its working okay. but in android when i click the textbox the popup comes but when i click inside the popup the underlying textbox and other form controls get focus and come over the popup and the focus get lost it go down the popup. for that i found a solution that is disable all the forms when the popup come and when in closes enable the controls. is their any solution for it. the below is my code.
<html>
<head>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1; minimum-scale=1; user-scalable=no;"/>
<link type="text/css" rel="stylesheet" href="../resources/js/calendar/CalendarWidget.css" />
<link rel="stylesheet" type="text/css" href="../resources/css/FlightBookingSearch.css"/>
<!-- Loading jquery and jquery ui from google api library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>QRMobile</title>
</head>
<body bgcolor="#D1D1D1">
<form action="calendarRecommendations" id="flightBookForm" name="flightBookForm" method="POST">
<table width="100%" cellspacing="0" cellpadding="0" border="0" >
<tbody valign="top">
<tr>
<td align="center">
<input type="text" size="10" id="departDate" name="departDate" value="" class="searchTextBox" readonly="readonly" style="cursor: pointer; width:90%; height:25px; margin:auto;"/>
</td>
</tr>
<tr>
<td align="center">
<input type="text" size="10" id="tempDate" name="tempDate" style="cursor: pointer; height:25px; width:90%; margin:auto;" class="searchTextBox" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
<div id="modal-window-wrapper">
<div id="modal-window-back">
<div id="modal-window-container">
<div id="modal-close">
<img src="../resources/js/calendar/close.gif" id="close-modal-calendar-widget" alt="close"/>
<p>Close</p>
</div>
<div id="modal-window">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../resources/js/calendar/CalendarWidget.js"></script>
<script type="text/javascript" src="../resources/js/FlightBookingSearchEvt.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var viewEventModule;
viewEventModule = new FlightBookingSearchEvt();
viewEventModule.load();
});
</script>
</body>
</html>
popup css
#modal-window-wrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
#modal-window-back {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:9997;
}
#modal-window-container {
width:95%;
height:auto;
margin: 10px auto;
background-color:white;
padding:3px 9px 3px 3px;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*border-radius: 10px;*/
-moz-box-shadow: 0 0 5px 5px #A1A1A1;
-webkit-box-shadow: 0 0 5px 5px #A1A1A1;
z-index:9998;
}
#modal-window {
width:100%;
height:auto;
background-color:white;
z-index:9999;
}
#modal-close {
width:99.3%;
height:auto;
overflow:hidden;
padding:5px 5px 5px 5px;
margin-bottom:10px;
border-bottom:1px solid #E6E6E6;
}
#modal-close img {
float:right;
}
#modal-close p {
float: right;
font:13px Arial;
color: #171817;
margin:0;
margin:3px 5px 0px 0px;
}
I think you should add z-index to modal-window-wrapper only because every other divs are inside that div so there is no need to make them absolute.
I am not sure but may be this will help you.