웹03_팝업창 열고 닫기(css조건달고,js 코드구성)

구조를 짤때 생각을 구체화 하는 연습하기.

문장을 구체화 해서 작성해보기.

 

 

- 팝업 구현 만드는중

 

(1) 팝업열기

내가 뭘 클릭해야하지? -> 커스텀 된 글자를 클릭하면 팝업이 나와야 한다.

클릭했을때 어떤 class가 나와야 하지? -> popup-section

 

실행

1. css에 popup-open에 popup-section이 열리게 하는 hover를 display: block; 걸어봤지만 --> 실패

 

 

선생님의 답

- popup-open을 클릭했을때 popup-section이 block으로 커스텀

- css: 조건걸기 -> .popup-section.active

- js: 조건맞게 코드 구성 addclass("active")

 

.popup-section.active {
    display: block;
}
/* 팝업 */
.popup-section {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;

// popup-open을 클릭했을때 popup-section이 block으로 커스텀
$(".popup-open").click(popup_Open);

function popup_Open() {
    $(".popup-section").addClass("active");
}

 

커스텀 글씨 클릭하면 나타나는 팝업

 

(2)팝업닫기

 

내가 뭘 클릭해야하지?

ㄴ 1단계 : 팝업안에 있는 x버튼을 클릭하면 팝업이 닫힌다.

팝업이 닫히려면 display:block; 상태에서 none상태로 바뀌어야한다.

ㄴ 2단계 : button을 클릭했을때 .popup-section이 none커스텀

ㄴ 3단계 : .popup-section 이 none

css : 조건걸기 .popup-section

js: 조건맞게 코드구성 removeClass("active")

 

// button을 클릭했을때 .popup-section이 none커스텀
$("button").click(popup_Close);

function popup_Close() {
    $(".popup-section").removeClass("active");
}

 

선택자는 버튼 이지만 함수에서 적용 되는 거는(닫히는) popup-section으로 지정 해준다.

 

 

https://codepen.io/leenyooo/pen/mdgRwXo

팝업열고닫기

전체코드