Question

我进行了ajax调用，在此期间我通过调用loading animation

手动触发jquerymobile的$.mobile.showPageLoadingMsg()

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

有谁知道如何实现这个目标？

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

感谢

Answer 1

我认为这就是你要找的东西

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

此处的演示 - http://jsfiddle.net/8uGpP/

这里需要注意的重要一点是，屏蔽div的 z-index要高于您在应用程序中使用的所有html元素的z-index，但是小于装载器div的z-index 。为了满足这个条件，我覆盖了z-index的{{1}}。仅使用1500进行演示，因为1200是JQM框架中使用的最大.ui-loader。

jquery mobile如何冻结屏幕

1 个答案: