How to make jqm "loading spinner" fill full screen - jquery-mobile

Question

jQuery Mobile offers a simple loader, but it does not offer a way to disable elements on the page while the loading process is occurring.
my wishlist:
1 - if the $.mobile.loading method offered a overlay-theme option (like the jqm popup)
2 - if the $.mobile.loading method accepted a target element to put the spinner into, such as a <div> set to fullscreen
$.mobile.loading( 'show', { text : "loading" ,
textVisible : true ,
theme : 'b' ,
html : ""
}) ;
However, I want to avoid the solution where I have to make my own <div> and toggle it separately but in synch with the $.mobile.loading( 'show/hide' , ... ) calls such as this SO suggests.

Answer 1

After playing with the ui-loader class in Firebug for a while, I finally gave up that approach and decided to do the fullscreen-div approach:
//-------------------------------------------------
var gvn_loader_bg_class = "jqm_loader_bg" ;
//--------------------------------------------------
function gf_jqm_loader_setup()
{
var lvo_loader = jQuery( ".ui-loader" ) ;
var lvi_loader_z = lvo_loader.css('z-index') ;
var lvs_style = "" ;
lvs_style += "position : fixed ;" ;
lvs_style += "left : 0% ;" ;
lvs_style += "top : 0% ;" ;
lvs_style += "width : 100% ;" ;
lvs_style += "height : 100% ;" ;
lvs_style += "background-color : white ;" ;
lvs_style += "opacity : .3 ;" ;
lvs_style += "display : none ;" ;
lvs_style += "z-index : " + ( lvi_loader_z - 1 ) + " ;" ;
lvo_loader.before( "<div class='" + gvn_loader_bg_class + "' style='" + lvs_style + "'></div>" ) ;
}
//-------------------------------------------------
function gf_toggle_jqm_loader( argb )
{ if( argb )
{ jQuery.mobile.loading( 'show') ;
jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'block' ) ;
}
else
{ jQuery.mobile.loading( 'hide') ;
jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'none' ) ;
}
}

Answer 2

This is my changes for jquery mobile css (Version 1.4.2) so that the loading div is filled fullscreen
.ui-loader .ui-icon-loading {
background-color: #000;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.375em;
margin-top: -1.375em;
width: 2.75em;
height: 2.75em;
padding: .0625em;
-webkit-border-radius: 2.25em;
border-radius: 2.25em;
}
.ui-loader-default {
background: none;
filter: Alpha(Opacity=18);
opacity: .18;
}
.ui-loader {
display: none;
z-index: 9999999;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}