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 回答