遮罩层（JS+CSS）

实现要求：点击按钮，出现遮罩层并且居中显示文字：

提前写好要实现的遮罩层，css定义好样式，js控制display为none或者为block，具体代码如下

CSS代码：

<style type="text/css">
   #mask{
       position:absolute;
       left:0;
       top:0;
       width:100%;
       height:100%;
       z-index:20000;
       background-color:gray;
       display: none;
   }
   #load{
       position:absolute;
       left:45%;
       top:40%;
       padding:2px;
       z-index:20001;
       height:auto;
       display: none;
   }

html代码：
<input type="button" id="btn" value="点击"/>
    <div id='mask'></div>
    <div id="load">
         loading.....
    </div>

JS代码：
<script>
    var btn=document.getElementById("btn");
    var mask=document.getElementById("mask");
    var load=document.getElementById("load");
    btn.onclick=function(){
        mask.style.display="block";
        load.style.display="block";
    }
    mask.onclick=function(){
        mask.style.display="none";
        load.style.display="none";
    }
</script>