android浏览器手机网页模式窗口

我做了一个网页，特别是一个窗体，以在Android设备上查看。我还制作了一个自定义日期选择器，当点击相应的文本框时，它会在弹出窗口中打开。但在浏览器中它的工作还行。但在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; 
}

来源

2012-06-04 Jaison Justus

我想你应该添加的z-index模态窗口 - 包装只是因为所有其他div的是内部的DIV所以没有必要让他们绝对。

我不确定，但可能会对你有帮助。

来源

2012-06-04 11:52:28 SVS

谢谢你的答案让我试试看。 –

android浏览器手机网页模式窗口

回答

相关问题