Search code examples
javascriptbuttonjquery-mobileoverlay

jquery mobile, disable all button when loading overlay is showed

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.

Thanks

Edited:

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

Solution

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

    Add this CSS:

    .ui-loader-background {
    width:100%;
    height:100%;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

.ui-loading .ui-loader-background {
    display:block;
}

    ui-loader-background is a custom class, but ui-loading is added by JQM to the <html> element when the loading spinner is shown.

    And add this element in your body:

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

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