팝업창 배경 터치하면 display:none 하는 방법..
본문
공지확인을 누르면 팝업창이 뜹니다.
그런데 닫기 버튼을 눌러야만 창이 닫힙니다..
배경을 터치해도 팝업창이 닫히도록 할 수 있을까요..??
#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;}
<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>답변 1
<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>
<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>
큰 도움이 됐네요. 정말 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
