Unexpected behavior shown when opening pop-up screen on iPad using jquery mobile

Question

I open a popup when I click the title button after actually opening the popup. I fill in my field, which will open the keyboard. Along with the black screen also open. How to remove this unnatural behavior. In fact, the theme rises, opening the keyboard. I used simple code:

http://jsfiddle.net/ravi1989/jDKDW/

<div data-role="page" id="Home" > <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" > <h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1> <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal"> <a href="#UserSettingScreen" data-transition="none" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a> <a href="#CaseInformationScreen" data-transition="none" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a> <a href="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup"id="Edit" data-position-to="window">Edit</a> </div> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" id="folderData" > </ul> <!-- **************Case Information Pop up Start*******************--> <div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false"> <div data-role="header" data-theme="b" > <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a> <h1>Case Information</h1> <a href="#" data-role="button" data-corners="false" id="AddButton">Add</a> </div> <div data-role="content"> <div><img src="img/Documents.png"/></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" class="caseName_h" > </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="date" class="caseDate_h" --> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/> </div> <div data-role="fieldcontain"> <label for="textarea-12">Textarea:</label> <textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h"></textarea> </div> </div> </div> <!--Case Information Pop up End************************--> <!-- User setting Pop up Start--> </div> </div>