Javascript

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

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


目次[非表示]

サンプル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * 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秒間ロックします。

0 件のコメント :

コメントを投稿