jQuery Mobileでポップアップをオーバーレイ表示する

jQueryMobile

こちらを参考にした。

jQuery Mobileでポップアップメッセージをオーバーレイ表示させる -星屑日記-
d:id:intheflight:20101126:p2

jQuery Mobileはポップアップのオーバーレイ表示を実現するメソッドがなぜかない。
つまり自分で書く必要があるのだが、jQueryMobileのソースから抽出した上記のような関数を利用するのが確実だろう。

ポップアップに文字列のみ表示されていると固まっているのか分かりにくいので、
ページ遷移で表示されるポップアップのように回転するアイコンが表示されるようにしてみた。

HowTo

appendするhtmlに以下のコードを追記するだけ。

<span class='ui-icon ui-icon-loading spin'></span>

追記したソースを含めると以下のようになる。

function jqmSimpleMessage(message) {
    $("<div class='ui-loader ui-overlay-shadow ui-body-a ui-corner-all' id='progress'><span class='ui-icon ui-icon-loading spin'></span><h1>" + message + "</h1></div>")
        .css({
            display: "block",
            opacity: 0.96,
            top: window.pageYOffset+100
        })
        .appendTo("body").delay(800)
        .fadeOut(400, function(){
            $(this).remove();
    });
}