팝업 질문드립니다.
본문
게시판 본문에 아래처럼 넣고 테스트하면 반응이 없네요. 왜이러는 걸까요?
게시판 본문이 아니고 독립된 파일에서는 잘되는데...
혹시 게시판 본문 내용에서 아이콘 클릭시 모달팝업처럼 반응형으로 뜨는 소스 없을까요?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>.popup {position:absolute; left:50%; top:50%; z-index:5; transform:translate(-50%, -50%); width:500px; height:500px; box-shadow:0 0 10px rgba(0,0,0,0.5);background:#fff; border-radius:5px; text-align:right; padding:20px; box-sizing:border-box; opacity:0; transition:all 0.5s; }
.popup a {color:gray; text-decoration:none;}
.popup:target {opacity:1;}
.popup:target +.dim {opacity:1; z-index:2;}
.dim {position:fixed; left:0; top:0; z-index:-1; width:100%; height:100%; opacity:0: transition:all 0.5s;background:rgba(0,0,0,0.8);}
</style>
</head>
<body>
<a href="#pop1" class="btn">열기</a>
<div class="popup" id="pop1">
<a href="#a">닫기</a>
<a href="#b">확인</a>
<a href="#c">취소</a>
</div>
<div class="dim"></div>
</body>
</html>
답변 2
윗분과 마찬가지로 테스트해본 결과 잘 실행되는 것 같습니다.
독립된 파일로는 실행이 된다고 하셨으니, 게시판 내의 코드와 충돌되는 부분이 없는지 확인해보세요.
또, style의 .dim 부분에 opacity:0: 으로 작성되어 있네요. ;로 수정해주셔야 할 듯합니다.
감사합니다. 게시판 내의 코드와 충돌일거 같긴한데 간단한 소스라 찾기가 더 어렵네요.
위 코드로 시험해 봤는데 잘 됩니다.
감사합니다.
