Question

enter image description here 我有一个页面和一个弹出页面，我想在点击按钮时显示弹出屏幕。我在弹出屏幕和页面上都有标题但是当我点击按钮弹出显示时但它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>

＆LT; / DIV＆GT; ＆LT; / DIV - ＆GT;

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

enter image description here

Answer 1

以下是演示：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>

请注意，我只添加了更改的属性。其余属性在demo中。

在显示弹出屏幕的同时冲突jquery移动的Css

1 个答案: