Jquerymobile как заблокировать экран

Я делаю вызов ajax, и во время этого я вручную запускаю jquerymobile loading animation, вызывая $.mobile.showPageLoadingMsg()

Я хочу, чтобы эта анимация загрузки была модальной (это не когда вызывается вручную). Другими словами, во время этой анимации я хочу заморозить весь экран (не только некоторые кнопки, но и все элементы должны быть незаметными, неотредактируемыми, невыбираемыми)

Кто-нибудь знает, как это достичь?

Я знаю, что jquery-ui имеет функцию для этого, но нормально ли использовать его в jquerymobile? Я разрабатываю приложение для ежевики и iphone с телефонной связью. Я бы предпочел мобильную версию, если она вообще существует.

спасибо

Ответы

Ответ 1

Я думаю, что это то, что вы ищете

<html>
    <head>
        <link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css'; return false;" />

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

Важно отметить, что z-index маскирующего div будет больше, чем z-index всех элементов html, которые вы можете использовать в своем приложении, но менее z-index загрузчика div. Для выполнения этого условия я переопределил z-index .ui-loader. Просто используется 1500 для демонстрационной цели, так как 1200 - это максимальный z-index, используемый в рамках JQM.