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:
with the following in our CSS:
and finally, the following utility function:
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,