순수 CSS를 사용한 팝업

기사를 시작하기 전에 나쁜 영어로 유감입니다. 나는 여전히 내 자신을 개선하고 있습니다. 자, 시작하겠습니다.

우리는 많은 일에 Javascript를 사용할 필요가 없다고 생각합니다. 팝업도 그중 하나입니다 :) 이번 글에서는 자바스크립트 없이 팝업을 만들어 보겠습니다.

따라서 핵심은 체크박스입니다. checkbox 및 :checked 의사 클래스를 사용하여 팝업을 만듭니다.

HTML 코드의 모양

다음과 같이 보입니다.

<div class="popup-container">
    <label class="popup-button" for="login-popup">Login</label>
    <input type="checkbox" id="login-popup">
    <div class="popup">
        <div class="popup-inner">
            <div class="popup-title">
                <h6>Login</h6>
                <label for="login-popup" class="popup-close-btn">Close</label>
            </div>
            <div class="popup-content">
                <!-- form -->
            </div>
        </div>
    </div>
</div>

CSS 코드를 작성해 봅시다

더 나은 쓰기 경험을 위해 sass를 사용할 것입니다.

.popup-container {
    display: inline-block;
    .popup-button {
        background: #333;
        line-height: 34px;
        color: #fff;
        padding: 0 20px;
        border-radius: 3px;
        display: block;
        cursor: pointer;
        &:hover {
            background: #444;
        }
    }
    // we'll continue from here
}

자, 이제 팝업이 이렇게 생겼습니다.



더 좋은 모습을 보여드리기 위해 계속해서 글을 써보아요 :)

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(#000,.7);
  z-index: 10;
  display: none;
  .popup-inner {
    width: 400px;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .popup-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      h6 {
        font-size: 18px;
        font-weight: 500;
      }
      .popup-close-btn {
        cursor: pointer;
        background: #eee;
        display: block;
        line-height: 30px;
        padding: 0 15px;
        font-size: 14px;
        color: #222;
        border-radius: 3px;
      }
    }
  }
}

좋아, 이제 더 좋아 보인다.



이제 양식 요소를 추가하고 훌륭한 CSS를 수행해 보겠습니다.

<form action="">
    <ul>
        <li>
            <input type="text" placeholder="Username">
        </li>
        <li>
            <input type="password" placeholder="Password">
        </li>
        <li>
            <button type="submit">Log in</button>
        </li>
    </ul>
</form>

.popup-content {
  ul {
    li {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      input {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 34px;
        padding: 0 15px;
        font-size: 14px;
        box-sizing: border-box;
      }
      button {
        width: 100%;
        line-height: 34px;
        background: #666;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        border: none;
        font-size: 14px;
        &:hover {
          background: #444;
        }
      }
    }
  }
}

이제 전설처럼 보입니다 :) css로 팝업에 숨김/표시 기능을 구현할 준비가 된 것 같습니다.

팝업 div를 숨기고 체크박스용 CSS 작성을 시작하겠습니다.

.popup {
  display: none;
}

>input {
  display: none;
  &:checked + .popup {
    display: flex;
  }
}

사실 그게 전부입니다 :) 하지만 팝업 경험을 조금 개선해 보겠습니다.

숨기기/표시를 사용하고 싶지 않습니다. 팝업이 아래에서 위로 오는 것과 같은 애니메이션을 추가하겠습니다. 그런 다음 닫기 버튼을 클릭하면 팝업이 다시 하단으로 이동합니다 :) CSS 코드를 약간 변경해 보겠습니다.

.popup {
  // display: none;
  opacity: 0;
  visibility: hidden;
  transition: 250ms all;
  .popup-inner {
    // top: 50%;
    top: 150%;
    transition: 250ms all;
  }
  >input {
    display: none;
    &:checked + .popup {
      opacity: 1;
      visibility: visible;
      .popup-inner {
        top: 50%;
      }
    }
  }
}

한 가지 더, 검은색 영역을 클릭해도 닫히지 않습니다. 우리는 자바 스크립트 없이 무엇을 할 수 있습니까? 검은색 영역을 클릭하면 숨길 수 있도록 레이블 태그를 다시 사용하겠습니다. :)

<div class="popup">
  <label for="login-popup" class="transparent-label"></label>
  ...
</div>

.transparent-label {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
}

그게 다야 :) 이제 우리는 더 나은 ux를 가지고 있습니다.



나는 누군가가 나보다 먼저 이것을 언급했다고 생각하지만 "다른 사람들을 위한 다른 밧줄":)

Check out demo on Codepen

참아줘서 고마워.