マスク層(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>