画面をロックする

投稿日：2022年02月27日 10時13分16秒
更新日：2022年03月03日 09時32分10秒

デモ

screenLock(msg = "処理中")

function screenLock(msg = "処理中"){

    var element = document.createElement('div');
    element.id = "screenLock";
  
    var inner = document.createElement('div');
    inner.classList.add("inner");

    // 文字を表示する用
    var p = document.createElement('p');
    p.className = "msg";
    p.innerText = msg;
    inner.appendChild(p);
    element.appendChild(inner);
    
    // body要素の子要素に追加
    var objBody = document.getElementsByTagName("body").item(0);
    objBody.appendChild(element);
    lastScreenLockElemID = element.id;
  
}

説明

body要素の子要素に#screenLockを追加し、全面全体に広げることで、他の要素をさわれないようにします。
ロック中に表示するメッセージは引数で任意なものに変えることが出来るようにしています。

screenUnLock()

function screenUnLock(){
    console.log("start[screenUnLock]");
    
    var screenElem = document.getElementById("screenLock");
    if (screenElem) {
        screenElem.parentNode.removeChild(screenElem);
    }

}