Jquery mobile popup dialog menu scroll up when Keyboard is visible in phonegap

Jquery mobile popup dialog menu scroll up when Keyboard is visible in
phonegap

m creating an app in which i want a popup dialog box with some text field
to be entered so i took an example from the jquery mobile site and just
inserted 4 input text to insert landline no with country and area
code.When i run it on the emulator is opens an popup dialog but when user
tyr to insert something on the text box it scrolls above so i used this
code in the script to disable page scroll as given below after this the
problem is user is able to insert data on only 2 text box because rest of
the text box are hidden beside the keyboard. What i want is page should
not scroll on its own when user keyboard is open and user should be able
to scroll the popup dialod to insert the data. here is the code that i had
return:
<a href="#popupDialog" data-rel="popup" data-position-to="window"
data-role="button" data-inline="true" data-transition="pop"
data-icon="delete" data-theme="b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="a"
data-theme="c" data-dismissible="false"
style="max-width:400px;" class="ui-corner-all" >
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d"
class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete
this page?</h3>
<p>This action cannot be undone.</p>
<input type='number' id='area code' placeholder='Area
code'>
<input type='number' id='country code'
placeholder='Country code'>
<input type='number' id='numder' placeholder='Number'>
<input type='button' id='open' data-rel='back'
value='OK'>
</div>
</div>
here is the javascript to disable the page scroll:
$(document).on('popupafteropen', '[data-role="popup"]' ,function(
event, ui ) {
$('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function(
event, ui ) {
$('body').css('overflow','auto');
});
Thanks in advance