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