JS - addClass / removeClass 사용해서 팝업 창 만들기

팝업 구현 1

1. CSS - popup클래스에 active클래스를 부여해 display:block;으로만 설정해둔다.
2. JS - Popup_show, Popup_hide 함수를 만들고, 팝업 버튼을 눌렀을때 active 추가하고 팝업 닫기 버튼을 눌렀을때 active를 제거한다.

function Popup_show() {
  $(".popup").addClass("active");
}

function Popup_hide() {
  $(".popup").removeClass("active");
}

$(".btn-popup").click(Popup_show);
$(".popup_btn-close").click(Popup_hide);

팝업 구현 2

1단계: 레이아웃

2단계: 닫기버튼 레이아웃

• popup_btn-close 클래스에 position:relatvie를 주고, 가상 요소 선택자를 이용해 position:absolute를 설정해 X 막대기가 파란색 박스 안에 갇히게 만든다.

.popup_btn-close {
  width: 100px;
  height: 100px;
  border: 10px solid blue;
  margin-left: auto;
  position: relative;
  cursor: pointer;
}

.popup_btn-close::before,
.popup_btn-close::after {
  content: "";
  background-color: black;
  position: absolute;
  width: 100px;
  height: 20px;
  top: 40%;
  left: 0;
  transform: rotate(45deg);
}

.popup_btn-close::after {
  transform: rotate(-45deg);
}

3단계: 레이아웃 완성

4단계: 팝업 열기/닫기 기능 구현