Jquery android浏览器移动网页模式窗口_Jquery_Android_Html_Css

Jquery android浏览器移动网页模式窗口

jquery android html css

Jquery android浏览器移动网页模式窗口,jquery,android,html,css,Jquery,Android,Html,Css,我制作了一个网页，特别是一个在android设备上查看的表单。我还制作了一个自定义日期选择器，当单击相应的文本框时，它会在弹出窗口中打开。但在浏览器中，它工作正常。但在安卓系统中，当我点击文本框时，弹出窗口就会出现，但当我点击弹出窗口内部时，底层的文本框和其他表单控件会获得焦点并越过弹出窗口，而焦点会丢失，并会进入弹出窗口。为此，我找到了一个解决方案，即在弹出窗口出现时禁用所有窗体，在关闭时启用控件。他们有什么解决办法吗。下面是我的代码 <html> <head> <

我制作了一个网页，特别是一个在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>

我认为应该将z-index添加到模态窗口包装器中，因为每个其他div都在该div中，所以不需要将它们设置为绝对值

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

#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;
}