JavaScriptでスクリーンロック（操作不可に）させる

使用用途

何かしらの処理をしている間、画面操作をしてほしくない場合に使う。
処理開始時にスクリーンロックさせて、終了時に解除するという使い方。

スクリーンロックさせる

画面いっぱいのdiv要素を作ってクリック＆タッチできなくする。

function screen_lock(){
  let lock_screen = document.createElement('div');
  lock_screen.id = "screenLock";

  lock_screen.style.height = '100%';
  lock_screen.style.left = '0px';
  lock_screen.style.position = 'fixed';
  lock_screen.style.top = '0px';
  lock_screen.style.width = '100%';
  lock_screen.style.zIndex = '9999';
  lock_screen.style.opacity = '0';

  let objBody = document.getElementsByTagName("body").item(0);
  objBody.appendChild(lock_screen);
}

スクリーンロックを解除する

画面いっぱいのdiv要素を消せば解除される。

function screen_unlock(){
  let screenLock = document.getElementById("screenLock");
  screenLock.parentNode.removeChild(screenLock);
}