使用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";
        }