Web画面上でボタンを2度押し禁止にする処置等がありますが、今回は簡単にJavascriptにて画面全体をロックする方法をご紹介。
押下したボタンを二度押し禁止にした所で他のボタンを押されるということもあるので画面全体にロックを掛けるようにしました。

ソース紹介

やることは透明なDivタグを表示して全面に追加するだけです。

<script>
// ロック用関数
function screenLock(){
	// ロック用のdivを生成
	var element = document.createElement('div'); 
	element.id = "screenLock"; 
	// ロック用のスタイル
	element.style.height = '100%'; 
	element.style.left = '0px'; 
	element.style.position = 'fixed';
	element.style.top = '0px';
	element.style.width = '100%';
	element.style.zIndex = '9999';
	element.style.opacity = '0';

	var objBody = document.getElementsByTagName("body").item(0); 
	objBody.appendChild(element);

	setTimeout( function() {
		// ロック画面の削除
		delete_dom_obj('screenLock');
	}, 3000 );
}

// div削除関数
function delete_dom_obj( id_name ){
    var dom_obj = document.getElementById(id_name);
    var dom_obj_parent=dom_obj.parentNode;
    dom_obj_parent.removeChild(dom_obj);
}
</script>
<input type="button" onclick="screenLock()" value="サンプル実行" />

screenLockで画面をロックしてsetTimeoutで5秒後にロックしているDivが消えるようにしてあります。
画面遷移が発生する箇所なら削除は不要です。

サンプル

※ロックしているのがわかりやすいように黒くなっております。
上記のソースの場合は透明になるように設定しているのでお気をつけください。

実際に使用されるのであればローディング画像にしたりしたらかっこいいロック画面になるかと思います。



«前の記事：【PHP】文字列を配列のように簡単に抜き出す方法【PHP】Xdebugを使ってコードカバレッジを取る方法：次の記事»