サブミット実行時にサーバーの処理時間が長い場合などに、今表示されているボタンなどの多重実行などを避けるために、画面全体をロックしたい場合があります。もっとも、サーバーの処理に時間をかけないようにできれば良いのですが、仕方がない場合もあるのでてっとり早く画面全体の操作を制限する 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(); } });
サンプルで使用しているスタイルについての簡単な説明
項目 | 説明 |
---|---|
z-index | 画面の重なり具合を設定する。数値が大きいほど上に覆いかぶされる。 |
position absolute | 位置を絶対位置で設定する |
top left right bottom | ブラウザの表示部分の4点の角からの距離。すべて0なので覆い尽くす |
background-color | 背景色(わかりやすいようにしているだけ) |
opacity | 透明度(不透明度)の設定(わかりやすいようにしているだけ) |