使用css写弹窗

HTML代码：

    <h1>弹窗效果</h1>    <div id="content">        this is content        <button id="btn1">click me</button>    </div>    <div id="d1">        <div id="d2">            <button id="btn2">close</button>        </div>    </div>

CSS代码：

        #d1{            position: fixed;            top:0;            left:0;            width:100%;            height:100%;            background-color:rgba(0,0,0,.3);            display: none;        }        #d2{            width:400px;            height:200px;            background: pink;            position: absolute;            top:0;            bottom:0;            left:0;            right:0;            margin:auto;        }        #content{            width:100%;            height:1000px;            background: palegreen;        }

JS代码：

        btn1.onclick=function(){            d1.style.display="block";        };        btn2.onclick=function(){            d1.style.display="none";        }