How can I make the loading animation be modal?

[David]

We use the Application.showLoading() method to show the loading animation whenever we make any AJAX calls, or refresh any DataSources in our mobile web app. However, the page below the loading animation remains active while the animation is displayed. This can lead to very weird behaviour if the user touches anything there.

How can I make the loading animation be modal?

What I have tried is the following:

<div id="glass" class="glass" style="display: none;"></div>

with the following in our CSS:

.glass {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 100;

    opacity: 0.3;

    background: #fff;

}

and finally, the following utility function:

function showLoading() {

  $("#glass").show();

  app.showLoading();

}

This works very well on:
- Safari on iOS
- Chrome on Android 4.2

However, it displays an ugly white rectangle on:
- Android Browser on Android 4.2 (see attached screen shot)

I would happily throw away all of this code if there is a Kendo provided method to achieve what I want. If Kendo really does not provide this functionality, then any help in what I am doing wrong with my code would be greatly appreciated.

Thanks in advance,
David Sykes

[Petyo]

Hello,

You may use the loader event capturing methods in order to prevent the user from clicking the app elements. However, this won't apply any sort of a visual overlay, and buttons will still be active (but they won't execute any actions). See this example for a reference implementation. 

Hope this helps,
Petyo
the Telerik team

[David]

Sorry for the delay in responding. Thanks for the answer. In the end I was able to get my "glass" working correctly. The solution was to change:

position: absolute;

to:

position: fixed;

We will go with this solution for now, and look into your one should we run into any problems later.

Thanks again,
David Sykes