1

ここに画像の説明を入力ボタンをクリックするとポップアップ画面を表示したい1つのページと1つのポップアップページがあります。ポップアップ画面とページの両方にヘッダーがありますが、ボタンをクリックするとポップアップが表示されますが、cssは実際のようにはうまくいきません. jquery mobile を使用しています。これが私のフィドルです

  <div data-role="page" id="Home" > 
        <div data-role="header" data-theme="b" data-position="fixed" >
            <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
            <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                <a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting">Setting</a>
                <a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" >Add</a>
                <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
            </div>
        </div>

</div> </div--> 

        <ul data-role="listview" data-inset="true" id="here_table" >
            </ul>
            </div>

    </div>




    <!-- Page two  Case Information Screen-------------------------->  

    <div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
        <div data-role="header" data-theme="d" data-position="fixed">

            <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
            <h1>Case Information</h1>
            <a href="#" ddata-role="button" data-corners="false">Add</a>
        </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">
                </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="text">
                </div>
        <div data-role="fieldcontain">
            <label for="textarea-12">Textarea:</label>
            <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
        </div>
    </div>

ここに画像の説明を入力

4

1 に答える 1

2

ここにデモがあります：http://jsfiddle.net/hungerpain/HesVd/3/

あなたのデモで私が変更したこと

  • HTML構造を少し変更しました：

    <div data-role="page" id="Home">
   <div data-role="header"></div>
   <div data-role="content"></div>
</div>
<div data-role="popup" id="CaseInformationScreen"></div>

               |   |
               |   |
              \     /
               \   /
                \ /

 <div data-role="page" id="Home">
   <div data-role="header"></div>
   <div data-role="content">
       <div data-role="popup" id="CaseInformationScreen"></div>
   </div>
</div>

その理由は、popupページ内に配置する必要があるためです。そうして初めてスタイリングが残ります。

  • ポップアップを起動するために配置したコードを削除し、次のように HTML にインラインで追加しました。

       <a href="#CaseInformationScreen" data-role="button" data-rel="popup" id="Add" data-position-to="window">Add</a>

変更された属性のみを追加したことに注意してください。残りの属性はデモにあります。

于 2013-06-16T10:45:32.830 に答える