0

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

1 に答える 1

1

z-index を modal-window-wrapper に追加する必要があるのは、他のすべての div がその div 内にあるため、絶対にする必要がないからだと思います。

よくわかりませんが、これが役立つかもしれません。

于 2012-06-04T11:52:28.453 に答える