0

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

1 回答 1

1

我认为您应该仅将 z-index 添加到 modal-window-wrapper ，因为其他所有 div 都在该 div 内，因此无需将它们设为绝对值。

我不确定，但这可能会对您有所帮助。

于 2012-06-04T11:52:28.453 回答