Conflict Css of jquery mobile while showing pop up screen - jquery-mobile

Question

I 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">
Setting
<a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" >Add</a>
Edit
</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">
Cancel
<h1>Case Information</h1>
Add
</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>

Answer 1

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:
Add
Note that I've added only the changed attributes. The rest of the attributes are in demo.