답변 2개
채택된 답변
+20 포인트
4년 전
이와 비슷한 예시 소스를 알려드리겠습니다.
HTML
</p>
<p><body></p>
<p><div class="openPopup">클릭하면 팝업이 나와요</div> </p>
<p><div id="popup01"></p>
<p> <div class="close">close</div></p>
<p> <div>팝업 내용</div></p>
<p></div></p>
<p></body></p>
<p>
CSS
</p>
<p>#popup01{</p>
<p> display: none;</p>
<p>}</p>
<p>#popup01{</p>
<p>width: 500px;</p>
<p>height: 500px;</p>
<p>position: absolute;</p>
<p>top: 50%;</p>
<p>left: 50%;</p>
<p>margin: -250px 0 0 -250px;</p>
<p>background-color: #fff;</p>
<p>z-index: 2;</p>
<p> }</p>
<p>.backon{</p>
<p> content: "";</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> background: #00000054;</p>
<p> position: fixed;</p>
<p> top: 0;</p>
<p> left: 0;</p>
<p> z-index: 1;</p>
<p>}</p>
<p>.close{</p>
<p> position:absolute;</p>
<p> top:-25px;</p>
<p> right: 0;</p>
<p> cursor:pointer;</p>
<p>}</p>
<p>.openPopup{</p>
<p> cursor:pointer;</p>
<p>}</p>
<p>
jquery / javacript
</p>
<p> $(document).ready(function( $ ){ </p>
<p> $(".openPopup").on("click", function(event) { //팝업오픈 버튼 누르면</p>
<p> $("#popup01").show(); //팝업 오픈</p>
<p> $("body").append('<div class="backon"></div>'); //뒷배경 생성</p>
<p> });</p>
<p> $("body").on("click", function(event) { </p>
<p> if(event.target.className == 'close' || event.target.className == 'backon'){</p>
<p> $("#popup01").hide(); //close버튼 이거나 뒷배경 클릭시 팝업 삭제</p>
<p> $(".backon").hide();</p>
<p> }</p>
<p> });</p>
<p> });</p>
<p>
찾으시는 비슷한 소스가 이게 맞는지 모르겠네요.
이걸 보고 본인 홈페이지의 소스에 맞게 수정하시면 될꺼같습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
시린♡
4년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사해유!!