If I understood you correctly you want to display a popup and prevent user from accessing rest of the page.
If this is true then this can be easily done with 2 additional popup attributes.
data-overlay-theme="a"
will create an overlay over whole page so only popup will be accessable.
data-dismissible="false"
will prevent popup closure when clicked outside of it. Basically only way to close it now is programatically.
Working example: http://jsfiddle.net/Gajotres/aJChc/
<div data-role="popup" id="toc" data-overlay-theme="a" data-dismissible="false"></div>
EDIT :
Next working example: http://jsfiddle.net/Gajotres/aJChc/
This code example will prevent body scrolling when popup is opened. Scrolling will ba enabled again when popup is closed.
$(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');
});
And this is your example with my code: http://jsfiddle.net/Gajotres/HesVd/13/
Label width fix:
.ui-input-text {
width: 100% !important;
}