[ jQuery ] 画面全体の操作をロックする ( z-index の活用 )

Tweet

Pocket

サブミット実行時にサーバーの処理時間が長い場合などに、今表示されているボタンなどの多重実行などを避けるために、画面全体をロックしたい場合があります。もっとも、サーバーの処理に時間をかけないようにできれば良いのですが、仕方がない場合もあるのでてっとり早く画面全体の操作を制限する jQuery を使用したサンプルを掲載しています。

画面ロックのサンプルスクリプト

本サンプルではロックと解除を実行していますので、動作を確認する場合には unlockScreen 関数の呼び出しをコメントアウトするとわかりやすいと思います。

$(function () {

    var lockId = "lockId";

    // 画面操作を無効する
    lockScreen(lockId);

    // 画面操作を有効にする
    unlockScreen(lockId);

    /*
     * 画面操作を無効にする
     */
    function lockScreen(id) {

        /*
         * 現在画面を覆い隠すためのDIVタグを作成する
         */
        var divTag = $('<div />').attr("id", id);

        /*
         * スタイルを設定
         */
        divTag.css("z-index", "999")
              .css("position", "absolute")
              .css("top", "0px")
              .css("left", "0px")
              .css("right", "0px")
              .css("bottom", "0px")
              .css("background-color", "gray")
              .css("opacity", "0.8");

        /*
         * BODYタグに作成したDIVタグを追加
         */
        $('body').append(divTag);
    }

    /*
     * 画面操作無効を解除する
     */
    function unlockScreen(id) {

        /*
         * 画面を覆っているタグを削除する
         */
        $("#" + id).remove();
    }

});

サンプルで使用しているスタイルについての簡単な説明

Tweet

Pocket