jquerymobile如何冻结屏幕

Question

jquerymobile如何冻结屏幕

des*_*tan 11 jquery-ui jquery-mobile cordova

我进行了ajax调用,在此期间我loading animation通过调用手动触发jquerymobile$.mobile.showPageLoadingMsg()

我希望这个加载动画是模态的(它不是手动调用时).换句话说,在这个动画中我想冻结整个屏幕(不仅是一些按钮,但所有元素都应该是不可点击的,不可编辑的,不可选择的)

谁知道怎么做到这一点？

我知道jquery-ui有这个功能但是可以在jquerymobile中使用它吗？我正在开发一个黑莓和iPhone的应用程序与phonegap.如果它存在的话,我更喜欢它的移动版本.

谢谢

Answer 1

use*_*284 23

我想这就是你要找的东西

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

Run Code Online (Sandbox Code Playgroud)

这里有一个演示 - http://jsfiddle.net/8uGpP/

这里要注意的重要的事情是给z-index遮蔽股利比更高z-index,你可能会使用你的应用程序中的所有HTML元素,但比其小z-index装载机股利.对于满足这个条件我已经覆盖了z-index的这个.ui-loader.仅使用1500进行演示,因为1200是z-indexJQM框架中使用的最大值.

归档时间：	13 年，10 月前
查看次数：	9489 次
最近记录：	13 年，10 月前