1.CSS

#hidebg { position:fixed;left:0px;top:0px;bottom:0;right:0;
      background-color:#000;
      width:100%;  /*寬度設定為100%，這樣才能使隱藏背景層覆蓋原頁面*/
      filter:alpha(opacity=60);  /*設定透明度為60%*/
      opacity:0.6;  /*非IE瀏覽器下設定透明度為60%*/
      display:none; /* http://www.jb51.net */
      z-Index:2;}
#hidebox { 
	position:absolute;
	width:70vw;height:100vw;;
	top:10%;left:8%;
	padding: 0 1.6em .8em;
	background-color:#fff;
	color:#999;
	display:none;cursor:pointer;
	z-Index:3;font-size: 15px;;
	text-align:center;
}
#hidebox #a24 {
	position:absolute;
	color:#019fe9;
	left:45%;
	bottom:2%;
	font-size: 18px;
}
#content { 
	text-align:center;cursor:pointer;z-Index:1;}
 

2.html

<div id="hidebg"></div>
<div id="hidebox">
	<div id="a22">紅票</div>
	<div id="a24" onClick="hide();">點選關閉</div>
</div>
<div id="content" onClick="show();">點選彈出</div>

function show() //顯示隱藏層和彈出層
            {
                var hideobj = document.getElementById("hidebg");
                hidebg.style.display = "block"; //顯示隱藏層
                hidebg.style.height = document.body.clientHeight + "px"; //設定隱藏層的高度為當前頁面高度
                document.getElementById("hidebox").style.display = "block"; //顯示彈出層
            };

function hide() //去除隱藏層和彈出層
            {
                document.getElementById("hidebg").style.display = "none";
                document.getElementById("hidebox").style.display = "none";
            };