CODEWITHSUNDEEP
jquery-mobile
user2484319
user2484319

Reputation:

Conflict Css of jquery mobile while showing pop up screen

enter image description hereI have one page and one pop up page i want to show pop up screen on clicking a button .I have header on both pop up screen and page but when i click the button the pop up is display but it css is not well as actual . I am using jquery mobile . Here is my fiddle

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

enter image description here

Upvotes: 1

Views: 773

Answers (1)

krishwader
krishwader

Reputation: 11371

Here's a demo : http://jsfiddle.net/hungerpain/HesVd/3/

What I've changed in your demo

  • I changed your HTML structure a lil bit :

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

The reason is because popup has to lie inside page. Only then will the styling remain.

  • I removed the code you'd put for popup to fire and added it inline in the HTML like this:

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

Note that I've added only the changed attributes. The rest of the attributes are in demo.

Upvotes: 2

Related Questions