Jquery ui jquerymobile如何冻结屏幕_Jquery Ui_Jquery Mobile_Cordova

Jquery ui jquerymobile如何冻结屏幕

jquery-ui jquery-mobile cordova

Jquery ui jquerymobile如何冻结屏幕,jquery-ui,jquery-mobile,cordova,Jquery Ui,Jquery Mobile,Cordova,我进行了一个ajax调用，在调用过程中，通过调用$.mobile.showPageLoadingMsg（）我希望这个加载动画是模态的（手动调用时不是这样）。换句话说，在这个动画中，我想冻结整个屏幕（不仅是一些按钮，而且所有元素都应该是不可点击、不可编辑、不可选择的）有人知道如何做到这一点吗我知道jQueryUI有这个功能，但是在jquerymobile中使用它可以吗？我正在用phonegap为黑莓和iphone开发一个应用程序。如果它存在的话，我更喜欢它的手机版谢谢我想这就是你要找的 &

我进行了一个ajax调用，在调用过程中，通过调用

$.mobile.showPageLoadingMsg（）

我希望这个加载动画是模态的（手动调用时不是这样）。换句话说，在这个动画中，我想冻结整个屏幕（不仅是一些按钮，而且所有元素都应该是不可点击、不可编辑、不可选择的）

有人知道如何做到这一点吗

我知道jQueryUI有这个功能，但是在jquerymobile中使用它可以吗？我正在用phonegap为黑莓和iphone开发一个应用程序。如果它存在的话，我更喜欢它的手机版

谢谢

我想这就是你要找的

<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>


.modalWindow{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：1500；
背景：白色；
不透明度：0.7；
}
.ui加载程序{
z指数：1501；
}
函数showmodel（）{
$（“正文”）。附加（“”）；
$.mobile.showPageLoadingMsg（）；
setTimeout（'hideModal（）'，2000）；
}
函数hideModal（）{
$（“.modalWindow”）.remove（）；
$.mobile.hidePageLoadingMsg（）；
}
标题
页脚

这里有一个演示-

这里需要注意的重要一点是，使masking div的z-index
高于应用程序中可能使用的所有html元素的
z-index
，但是小于loader div的
z-index
。为了满足这个条件，我已经覆盖了
.ui loader的z-index 。仅使用1500进行演示，因为1200是JQM框架中使用的最大z-index 。干得好！我很惊讶这不是jQuery Mobile的固有特性。这是一个很好的解决方案。我将它与$.ajax（）的beforeSend 和complete 结合使用，以在ajax调用期间显示和隐藏模式微调器。通过这种方式使用它，它只有在指定了async:true 的情况下才能工作。您好，我在IE10上使用的是JQM4（v1.4）和JQ9（1.9）。IE10未检测到showPageLoadingMsg（）消息。它表示该对象不支持此方法。@NavinIsrani showPageLoadingMsg（）已被弃用。请改用loading（）。请参阅“完成”！我正在工作。。ppl必须知道，$.mobile.loading（'show'）仅在“pageshow”事件中有效，而不在任何其他事件中有效。loading（'hide'）调用在其他事件中也有效。