깃허브에서 어떻게 조종했지? 팝업

반응형

• 에피소드 1: 드롭다운
• 에피소드2: 모달 대화 상자
• 에피소드3: 햄버거 메뉴
• 에피소드4: 팝업

씌우다

지난 회에서 우리는 디테일과 요약 태그가 있는 햄버거 메뉴를 만들었습니다.

지금이다

 

이것은 이 멋진 태그를 사용하여 팝업을 만드는 이 시리즈의 마지막 에피소드입니다.

평소처럼 지루하고 반복적인 html로 시작합시다.

<details aria-haspopup="true">
      <summary>
          I'm a popcorn
    </summary>
    <div>You are awesome!!</div>
</details>

아, 팝콘 영화 볼 시간이야 잠깐, 멍청한 아코디언이지

그래 그래 너의 좌절감을 봤어.. 술을 마시다

 

있잖아, 이걸 위해 처음부터 다시 시작할 필요는 없어. 팝업은 우리가 첫 번째 에피소드에서 디자인한 드롭다운과 동일합니다.

차이점은 다음과 같다.

• 팝업은 모든 유형의 내용을 포함할 수 있는 반면 드롭다운은 선택사항 목록을 포함합니다.
• 블록 요소인 드롭다운과 달리 인라인 요소입니다.

따라서 다음과 같은 드롭다운 스타일을 재사용할 수 있습니다(대부분은 필요하지 않습니다.

:root {
    --primary: #fff;
    --border-color: #ccc;
    --spacing: 1rem;
}

details[aria-haspopup="true"] {
    position: relative;

    & > summary {
           list-style: none;
    }
    &[open] > summary {
           &::before {
                   position: fixed;
                   top: 0;
                   right: 0;
                   bottom: 0;
                   left: 0;
                   z-index: 1;
                   display: block;
                   cursor: default;
                   content: ' ';
                   background: transparent;
           }
    }
}

 

여기 있네요. 기본 구조는 완성되었습니다. 페이지의 아무 곳이나 클릭하면 아코디언이 닫힙니다. 이제 컨테이너 div 태그에 단순 스타일을 추가하겠습니다.

summary + div {
     position: absolute;
     margin: 4px auto;
     padding: var(--spacing);
     z-index: 2;
     background-color: var(--primary);
     border: 1px solid var(--border-color);
     border-radius: 4px;
}

굉장해!! 그렇죠? 요약 태그를 클릭하면 "You`re amazing yes I meanites"라는 작은 팝업이 열립니다. 정말 그렇구나!!

div 태그에 왼쪽, 오른쪽 또는 아래쪽 css를 적용하여 팝업을 원하는 방향으로 배치할 수 있습니다.

그리고 이것이 마지막입니다. 여기 팝콘이 있네요. 내 말은 팝업

 

시간 내주셔서 감사드리며, 여기 작업 예시가 있습니다.

다시 만나자 see you,
키란