jquery mobile, disable all buttons when loading the overlay is shown


Actually i can call this code

$(":input").attr("disabled",true); //Disable all input fields

to disable all buttons on my page. But i don't know how good is the performance when i have a lot of button on my page.

I saw a trick that we create a loading indicator overlay, which is above all element on the page => user can not click on the buttons anymore

is there any way to reuse the loading overlay of jquery mobile to archive the above trick? I'm not good at CSS so hopefully someone can help me.



i ended up with using jquery.blockUI plugin for jQuery and it works as expected. And i added the default div with css from jquery mobile so that i still have the loading message of jquery mobile and the behaviour that i wanted

Working sample here

A simple way I've just found is to use a fixed background with z-index and opacity :

Add this css :

.ui-loader-background {
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;

.ui-loading .ui-loader-background {

ui-loader-background is a custom class, but ui-loading is added by JQM to the when the loading is showed.

And this element in your body :

<div class="ui-loader-background"> </div>

example : http://jsfiddle.net/5GB6B/1/