Menu
I make an ajax call and during it I manually trigger jquerymobile's loading animation by calling $.mobile.showPageLoadingMsg()
I want this loading animation to be modal(it is not when manually called). In other words during this animation I want to freeze whole screen (not only some buttons but all the elements should be unclickable, uneditable, unselectable)
anybody knows how to achieve this?
I know jquery-ui has a function for this but is it ok to use it in jquerymobile? I am developing an app for blackberry and iphone with phonegap. I'd prefer mobile version of it if it exists at all.
thanks
998
I think this is what you are looking for
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
.modalWindow{
width: 100%;
height: 100%;
position: absolute;
z-index: 1500;
background: white;
opacity: 0.7;
}
.ui-loader{
z-index: 1501;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script>
function showModal(){
$("body").append('<div class="modalWindow"/>');
$.mobile.showPageLoadingMsg();
setTimeout('hideModal()', 2000);
}
function hideModal(){
$(".modalWindow").remove();
$.mobile.hidePageLoadingMsg();
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
</div>
<div data-role="content">
<input type="button" value="Click to show modal loading window" onclick="showModal()"/>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
A demo here - http://jsfiddle.net/8uGpP/
The important thing to note here is to give the z-index of the masking div to be higher than the z-index of all the html elements that you may be using in your application,but lesser than the z-index of loader div.For satisfying this condition I have overridden the z-index of the .ui-loader . Just used 1500 for demo purpose since 1200 is the maximum z-index used within the JQM framework.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
