create a Mask In Document

gistfile1.txt

function createMaskElement() {

	//	1. 做一個空的 <p> 充當我們的 offset
    let offset = document.createElement("p")
	
	//	這行其實可以省略
	offset.innerHTML = ""	
	
    //	Browser Default 都會給 Element margin 16px , 這裡為了保持數據上的乾淨 , 直接歸零
	offset.style.margin = "0"	
	
	//	這行就是重點 offset 的 高度
    offset.style.height = "50px"
	
	//	2. 找到遊戲的主畫面
	let gameScene = document.querySelector(".egret-player")
    
	//	插到主畫面的前面
    document.body.insertBefore(offset,gameScene)
	
	//	3. 做一個 <div> 充當我們的遮罩 
	let mask = document.createElement("div")
	
	//	遮罩的 CSS 設定 , 請注意 position 在 IPhone 上不能用 fixed
    mask.style.cssText = ```
	position: absolute; 
	z-index: 9999;
	padding:0;
	margin:0;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.8)
	```
	
	//	給他一個 id 方便等等掛 Event
	mask.setAttribute("id", "mask")
	
	//	塞到最後面
    document.body.appendChild(mask)
}