팝업창 배경 터치하면 display:none 하는 방법.. 채택완료

</p>

<p><style>

#layerpopup{display: none;}

#layer_bg #popup label { font-size:1.3em; color:#fff; font-weight:600; line-height: 25px; vertical-align: super;padding: 2.5px 20px;background: #a32330; border-radius:3px;}

#layer_bg #popup h2 { font-size:1.4em; color:#575757; font-weight:500; margin-top: 6px;}

#layer_bg #popup a { font-size:1.4em; color:#fff; font-weight:500; margin: 2px; padding: 5px 15px; background: #354c28;}

#layer_bg #popup .kkao { font-size:1.4em; color:#000100; font-weight:500; margin: 2px; padding: 5px 8px; background: #fae100;}

#layerpopup + label{display: inline-block;padding: 5px 14px;background: #a32330; font-size:1.4em; font-weight: 500; color:#fff ;}

#layer_bg{z-index:99; display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0, 0.8);}

#layerpopup:checked+label+#layer_bg{display: block;}

#layer_bg>#popup{z-index:99; position: absolute;width:300px; height:200px; padding:15px;box-sizing: border-box;border: 4px double #c1c1c1;border-radius:15px;box-shadow: 0px 0px 5px 0.5px white; top: 50%;left: 50%;transform: translate(-50%,-50%);background: #fff;}

#layer_bg>#popup>h2{margin-bottom: 20px ;}

#layer_bg>#popup>h2>label{float: right;}

</style></p>

<p> </p>

<p><script>

document.addEventListener('DOMContentLoaded', function () {

    document.querySelector('#layer_bg').addEventListener('click', function (evt) {

        if (evt.target == this) {

            document.querySelector('#layerpopup').checked = false;

        }

    });

});

</script>

 

    <input type="checkbox" id="layerpopup">

    <label for="layerpopup">공지확인</label>

    <div id="layer_bg">

        <div id=popup>

            <label for="layerpopup">닫기</label>

            <h2>어서오세요</h2>

            <p><a href="/bbs/register.php">회원등록</a><a href="/bbs/login.php">로그인</a></p>

        </div>

    </div></p>

<p>