8강 강의(숙제x)

[stronghasu]

제이쿼리로 애니메이션을 주면 부하가 올수도 있음 가능하면 애니메이션은 css로 처리 한 방향으로 형태가 변하는걸 one way animation 이라고 부름

나중을 위해 class 탈부착 식으로 만들어주는게 좋음 .show modal 이라는 class를 탈부착 함 visibility 는 display 와 같은데 차이점은 display 는 아예 요소를 삭제하는 방식이고 visibility 는 눈에 안보이게 하는 방식 transition 속성을 줘서 동적으로 보이게 함

html
    <button id="login-btn">로그인</button>

    <div class="black-bg show-modal">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
      </div>
    </div>

css

.black-bg {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  transition: all 1s;
}
.show-modal {
  visibility: visible;
  opacity: 1;
}

js

   $("#login-btn").on("click", function () {
        $(".black-bg").addClass("show-modal");
      });

      $("#close").on("click", function () {
        $(".black-bg").removeClass("show-modal");
      });