我制作了一个网页，尤其是一个可以在 Android 设备上查看的表格。我还制作了一个自定义日期选择器，当单击相应的文本框时，它会在弹出窗口中打开。但在浏览器中它工作正常。但是在 android 中，当我单击文本框时弹出窗口出现但是当我在弹出窗口中单击时，底层文本框和其他表单控件获得焦点并越过弹出窗口并且焦点丢失它向下弹出窗口。为此，我找到了一个解决方案，该解决方案在弹出窗口出现时禁用所有表单，在关闭时启用控件。是他们的任何解决方案。下面是我的代码。
<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>
弹出式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;
}
最佳答案
我认为你应该将 z-index 添加到 modal-window-wrapper 只是因为所有其他 div 都在该 div 中所以没有必要使它们成为绝对的。
我不确定，但也许这会对您有所帮助。
关于jquery - android浏览器手机网页模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10880173/