단계별로 CSS 모달 창(팝업) 만들기

다시한번 안녕히 주무세요 오늘 하루 어때요?

나는 꽤 좋다.
인턴십 프로젝트를 위해 Modals에 대해 배우면서 지난 주 많은 시간을 보냈기 때문에 여러분과 공유해야겠다고 생각했습니다.

첫째, 나는 Divaloper의 동거인에게 내 프로젝트에 대한 도움을 요청할 때까지 모달이 무엇인지 몰랐기 때문에 당신도 모를 수도 있습니다.
모달 창은 일종의 팝업입니다. 무언가를 클릭하면 정보가 있는 창이 열립니다.

내 프로젝트의 경우 표의 한 줄이 클릭될 때 열릴 정보가 있는 카드가 필요합니다. 나중에 내 실험에서 이것이 선 요소 때문에 CSS만으로는 수행될 수 없다는 것을 알게 되었습니다. 그러나 간단한 모달은 CSS로만 만들 수 있으므로 오늘은 이에 대해 이야기하겠습니다. 저는 순수한 CSS와 과소 평가된 강력한 기능을 좋아하기 때문입니다.

나는 여전히 스스로 배우는 중이고 튜토리얼을 쓰는 것도 나에게 새로운 일이니 조금만 참아줘 알았지?

간단한 예를 들겠습니다.

HTML

먼저 버튼을 만들어야 합니다.
나는 단지 Div 안에 링크를 넣고 있습니다.

<div>
  <a href="#modal">Open Modal</a>
<div>

클릭하면 지금 생성할 모달 div가 열리기 때문에 링크는 href#modal을 가져옵니다.

<div id="modal">
  <div class="modal__window">
      <a class="modal__close" href="#">X</a>
      <h2>Please to meet you!</h2>
      <p>Hello there, I am a nice Modal Window.</p> 
  </div>
</div>

ID가 modal인 div는 컨테이너이고 modal_window 클래스가 있는 div는 표시하려는 창입니다.
이 두 번째 has a class of modal _close 모달 창을 종료하고 싶을 때 모달 창을 닫는 것은 모서리에 있는 X이며 href는 #입니다.

이것은 우리가 필요로 하는 매우 기본적인 HTML입니다. 이제 CSS에 대해 살펴보겠습니다.

CSS

#modal div 스타일을 지정하여 시작하겠습니다.

#modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

이것은 외부 창의 배경이 될 것이므로 제자리에 남아 있기를 원하기 때문에 위치가 고정됩니다. 위쪽과 왼쪽이 0이고 너비와 높이가 100%인 이유는 이것이 전체 페이지를 덮기를 원하기 때문입니다.
선택한 배경색은 약간의 투명도를 제공하므로 기본 페이지의 내용을 계속 볼 수 있습니다.
Display flex, justify-content 및 align-items는 우리 창이 중앙에 있도록 하기 위한 것입니다.

그래서 지금까지 우리가 가진 것은 다음과 같습니다.


모달이 생성되고 스타일이 지정됩니다.
이제 창 스타일을 지정합니다.

.modal__window {
  position: relative;
  background-color: white;
  padding: 4em 2em;
}

.modal__close {
  position: absolute;
  top: -30px;
  right: 0;
}

여기서 우리는 창을 멋진 카드처럼 보이게 만들고 카드를 닫을 X를 배치합니다.


이제 사업을 시작합시다.
모달을 없애고 링크를 클릭하면 나타나게 해야 합니다.

#modal:not(:target) {
    visibility: hidden;
    opacity: 0;
}

이 코드 조각은 #modal이 대상이 아닐 때 숨겨진 상태를 유지한다고 말합니다. 이제 링크를 클릭할 때에만 열릴 것입니다.
그리고 여기 우리의 최종 게임이 있습니다.

요약

링크가 필요합니다.
컨테이너 내부에 요소가 필요합니다(이 경우 div 내부의 div).
컨테이너에 링크의 href로 전달된 ID를 부여합니다.
:not(:target)을 사용하여 링크를 클릭할 때까지 컨테이너를 숨깁니다.
그리고 href가 #인 또 다른 링크를 사용하여 모달 창을 닫습니다.

아직도 나와 함께 있니?



나와 함께 해주셔서 감사합니다. 이것은 더 많은 기술 게시물에서 나의 첫 번째 잠정적입니다. 또한 모든 것을 기록하면 프로세스를 더 잘 이해하고 유지하는 데 도움이 됩니다.
읽어주셔서 다시 한 번 감사드립니다.

행복한 월요일,
키스와 포옹
피.