Javascript

【Javascript】画面ロックを簡単実装

二度押し防止などのために簡単に実装できる画面ロック

サンプル

/**
 * ScreenLook
 */
function screenLock(){
  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);
}

/**
 * ScreenUnLook
 */
function screenUnLock(){
  var screenLock = document.getElementById("screenLock");
  screenLock.parentNode.removeChild(screenLock);
}

使い方は好きなタイミングでScreenLookを呼び出してください。

透明なdivタグを生成して画面を触れないようにします。

ScreenUnLookでdivを削除して再使用できます。

サンプルは画面全体がグレーになって2秒間ロックします。