마스크 레이어(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>