1. 팝업 버튼이 눌리면 배경이 어둡게 하기
팝업이 뜨면 팝업을 제외한 배경이 어두워지게 하자
html : 팝업 버튼과 배경 영역 만들기
<div class="popup-box"> <div class="popup"></div> </div> //배경영역 안에 팝업영역을 넣어준다 <div class="button-1"> <button class="show-popup-1">팝업열기</button> // 버튼을 만든다 </div>css : 배경 만들기
.popup-box{ position:fixed; top:0; left:0; width:100%; height:100%; transition: background-color .5s; visibility:hidden; } // 팝업 영역 크기 조정하고 숨기기 // 버튼 위에 덮고 있어 팝업버튼을 누르기 전까진 숨겨야한다 html.popup-active-1 .popup-box{ visibility:visible; background-color:rgba(0, 0, 0, 0.5); } // html에 지금은 없지만 popup-active-1 클래스가 생기면 실행되게 할것이다 // 배경 어둡게 하기javascript : 클릭 시 배경 나오고 없애기
// 팝업 버튼 클릭시 popup-active-1이 실행 $('.show-popup-1').click(function(){ $('html').addClass('popup-active-1'); }) // 배경 클릭시 popup-active-1 제거 $('.popup-box').click(function(){ $('html').removeClass('popup-active-1'); })
이건 진짜 중요!!!!
1. css에서 html에 클래스가 지금은 없지만 어떤 클래스가 있다면 javascript에서 실행할 것이다 라는 것을 표현한 방법 - css의 popup-active-1
- 현재 html에 있지도 않은 클래스를 함수로 조정하는 방법
위 두 가지 방법은 꼭 기억해두자
2. 팝업 커스텀하기
html : popup클래스 안에
header와close,body클래스 생성<div class="popup-box"> <div class="popup"> <div class="header"> <div class="close"> // 닫기버튼 만들 영역 </div> </div> <div class="body"></div> // 글 나오는 영역 </div> </div>
css : 팝업 꾸미기
.popup-box > .popup{ width : 500px; height:300px; position : absolute; top:25%; left:25%; tansform : translate(-25%,-25%); background-color:white; border:20px solid black; } /* 팝업 닫기 버튼 만들기 */ .popup-box>.popup>.header>.close{ position : absolute; top:0; left:auto; right : 0; background-color:red; width : 50px; height: 50px; } .popup-box>.popup>.header>.close::before, .popup-box>.popup>.header>.close::after{ content: ""; background-color : black; width :10%; height:50%; position: absolute; top:24%; left:45%; transform: translate(-50%. -50%); transform:rotate(45deg); } .popup-box>.popup>.header>.close::after{ transform: rotate(-46deg); } .popup-box>.popup>.header>.close:hover{ transform: rotate(45deg); } /* 팝업 내용 위치 잡기 */ .popup-box>.popup>.body{ margin-top:20%; padding: 20px; }
체크하고 넘어가자
css에서 content=""를 사용해 빈 공백에 background-color를 넣고 막대를 만들어 이리저리 움직여 활용할 수 있다
3. 오류 수정
문제가 생겼다
팝업이 떠진 후 어딜 눌러도 꺼진다
지금 배경에 remove함수가 걸려있는것이다
난 배경과 ' x '만 눌렀을때 꺼지게 하고싶다
해결방안
- ' x '를 누르면 꺼져야 한다
- 팝업영역이 눌려도 꺼지면 안된다
javascript : 위 해결방안의 기능을 만들자
// x를 클릭하면 팝업을 꺼준다 // html의 close 영역에 함수를 부여해주자 $('.popup-box>.popup>.header>.close').click(function(){ $('html').removeClass('popup-active-1'); }) // 팝업은 클릭시 생기는 이벤트 들을 전파를 전해주지 않는다 // stopPropagation 함수 사용 $('.popup').click(function(e){ e.stopPropagation(); })
! stopPropagation를 알아두자
함수가 html의 부모로 실행되면 자식에서 출발해 부모에게 간다
여기서 중간에 그 전파를 끊어주는 역할을 한다
내가 끝어주고 싶은 태그를 넣고 함수를 활용하자
참고로 아래의 코드에서 인자값 e는 event약자로 공식처럼 사용되는 약속이다
$('.popup').click(function(e){
e.stopPropagation();
})
4. 버튼 추가하기
html :
popup-box와button을 복사하고type이란 클래스를 생성해서 css는 복사하지 말고 묶어주자<div class="popup-box type"> <div class="popup"> <div class="header"> <div class="close"> </div> </div> <div class="body"> 내용 1 </div> </div> </div> <!-- popup 복사 --> <div class="popup-box-2 type"> <div class="popup"> <div class="header"> <div class="close"> </div> </div> <div class="body"> 내용2 </div> </div> </div> <div class="button-1"> <button class="show-popup-1">팝업열기</button> <!-- 버튼 생성 --> <button class="show-popup-2">팝업열기2</button> </div>
css : popup-box 클래스를 모두 type으로 바꾸고 복사한 버튼에 대한 기능을 추가해주자
/* popup-box를 모두 type으로 변경 */ .type{ position:fixed; top:0; left:0; width:100%; height:100%; transition: background-color .5s; visibility:hidden; } /* 팝업창 만들기 */ .type > .popup{ width : 500px; height:300px; position : absolute; top:25%; left:25%; tansform : translate(-25%,-25%); background-color:white; border:2px solid black; } /* 팝업 닫기 버튼 만들기 */ .type>.popup>.header>.close{ position : absolute; top:0; left:auto; right : 0; background-color:red; width : 50px; height: 50px; } .type>.popup>.header>.close::before, .type>.popup>.header>.close::after{ content: ""; background-color : black; width :10%; height:50%; position: absolute; top:24%; left:45%; transform: translate(-50%. -50%); transform:rotate(45deg); } .type>.popup>.header>.close::after{ transform: rotate(-46deg); } .type>.popup>.header>.close:hover{ transform: rotate(-160deg); } /* 팝업 내용 위치 잡기 */ .type>.popup> .body{ margin-top:20%; padding: 20px; } /* 팝업 박스 기능 */ html.popup-active-1 .popup-box{ visibility:visible; background-color:rgba(0, 0, 0, 0.5); } /* 팝업 박스 기능 추가 */ html.popup-active-2 .popup-box-2{ visibility:visible; background-color:rgba(0, 0, 0, 0.5); }
javascript : 복사한 버튼에 대한 기능을 추가해주자
// 버튼 1 $('.show-popup-1').click(function(){ $('html').addClass('popup-active-1'); }) // 배경 클릭시 popup-active-1 제거 $('.popup-box').click(function(){ $('html').removeClass('popup-active-1'); }) // 팝업은 클릭시 생기는 이벤트 들을 전파를 전해주지 않는다 $('.popup-box>.popup').click(function(e){ e.stopPropagation(); }) // x를 클릭하면 팝업을 꺼준다 $('.popup-box>.popup>.header>.close').click(function(){ $('html').removeClass('popup-active-1'); }) //버튼 1 끝 //버튼 2 $('.show-popup-2').click(function(){ $('html').addClass('popup-active-2'); }) // 배경 클릭시 popup-active-1 제거 $('.popup-box-2').click(function(){ $('html').removeClass('popup-active-2'); }) // 팝업은 클릭시 생기는 이벤트 들을 전파를 전해주지 않는다 $('.popup-box-2>.popup').click(function(e){ e.stopPropagation(); }) // x를 클릭하면 팝업을 꺼준다 $('.popup-box-2>.popup>.header>.close').click(function(){ $('html').removeClass('popup-active-2'); }) // 버튼2 끝
Today Comment :
보이지 않는 클래스를 다룬다는게 첫 관문이였다
html, css, javascript 사이에 서로 연동된 태그의 클래스가 일치하는지 항상 확인하자
그리고 코드펜을 쓴다면 구글보단 사파리다...
구글하면 코드가 실행이 안되는 오류가 빈번하여 맞는 코드도 어디가 틀렸는지 계속 찾게 될 것이다
사파리 : 구글...보고있나?
박상은