0

ポップアップ画面の上に日付ボックスを表示する方法を教えてください。実際に日付ボックスを実装しようとしていますが、ポップアップ画面の下に表示されています。 http://jsfiddle.net/ravi1989/3yG9E/

 - <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>

    <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->

    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
    <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
    <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
    <link rel="stylesheet" href="css/base.css">

    <!-- Extra Codiqa features -->
    <!-- jQuery and jQuery Mobile -->
    <script src="js/jquery-1.9.1.min.js"></script>

    <script src="cordova-2.7.0.js"></script>
    <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
    <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
     <script src="lib/jquery.textselect.min.js" type="text/javascript"></script>
    <script src="lib/jquery.scrollTo.min.js" type="text/javascript"></script>
    <script src="js/jquery.search.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.3.1.js"></script>
    <script src="js/index.js"></script>
    <script src="js/PopupScript.js"></script>
    <script src="js/CasePadDatabase.js"></script>
    <script type="text/javascript"  src="js/websocket.js"></script>
    <script src="js/BackButtonImplentation.js"></script>
    <script src="js/fontSizeFunctionality.js"></script>
    <script src="js/CreateFolder.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/WebSocketPlugin.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/highlight.js"></script>
    <script src="js/EmailComposer.js"></script>


    <!--link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /-->
    <link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />       
    <!--script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script-->        
    <script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script> 





</head>


<body>
    <!--**********************************Home page Star******************************-->
    <div data-role="page" id="Home" > 
        <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
            <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
            <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                <a href="#UserSettingScreen" data-transition="none" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                <a href="#CaseInformationScreen" data-transition="none" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                <a href="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup"id="Edit" data-position-to="window">Edit</a>
            </div>
        </div>

        <div data-role="content">

            <ul data-role="listview" data-inset="true" id="folderData" >
            </ul>
            <!-- **************Case Information Pop up Start*******************-->
            <div data-role="popup" id="CaseInformationScreen" data-close-btn="none"  data-overlay-theme="a" data-dismissible="false">
                <div data-role="header" data-theme="b" >

                    <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                    <h1>Case Information</h1>
                    <a href="#" data-role="button" data-corners="false" id="AddButton">Add</a>
                </div>

                <div data-role="content">
                    <div><img src="img/Documents.png"/></div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="text-12" value="" type="text" class="caseName_h" >
                    </div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;" >Case Date:</label>
                        <!--input name="text-12" id="text-12" value="" type="date" class="caseDate_h"  -->
                        <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="textarea-12">Textarea:</label>
                        <textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h"></textarea>
                    </div>
                </div>
            </div>

実際には、ヘッダーにボタンがあります。クリックすると、ポップアップ画面の下に表示されているクリック日付フィールドにポップアップ画面が表示されます。ポップアップ画面の上に日付ボックスを表示するには、z インデックスを変更できますか?

4

2 に答える 2

0

これはjquery mobileからのものです。

注: ポップアップの連鎖は許可されていません

フレームワークは現在、ポップアップの連鎖をサポートしていないため、あるポップアップから別のポップアップへのリンクを埋め込むことはできません。ポップアップ内に data-rel="popup" を含むすべてのリンクは、何もしません。

これは、カスタム選択メニューがポップアップを使用して実装されているため、ポップアップ内で機能しないことも意味します。選択メニューをポップアップ内に配置すると、data-native-menu="false" を指定した場合でも、ネイティブの選択メニューとしてレンダリングされます。

チェーンされたポップアップを機能させるための回避策は、呼び出し元のポップアップにバインドされた popupafterclose イベントなどでタイムアウトを使用することです。次の例では、最初のポップアップが閉じられると、open メソッドへの遅延呼び出しによって 2 番目のポップアップが開かれます。

$( document ).on( "pageinit", function() {
    $( '.popupParent' ).on({
        popupafterclose: function() {
            setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
        }
    });
});
于 2013-07-14T05:45:53.153 に答える