Flexbox가 있고 미디어 쿼리가 없는 반응형 모달

아니 블라 블라 블라, 일을 끝내자. 이 게시물을 더 잘 이해하려면 HTML, SCSS 및 CSS Vars에 대해 아는 것이 좋습니다.

아이디어는 미디어 쿼리 없이 플렉스박스만 사용하여 반응형 모달 프런트 엔드 구조를 작성하는 것입니다. 유체 모달. (S)CSS 스타일의 요점을 강조하려고 합니다. 어쨌든 결과는 다음과 같습니다.



"전체"화면에서 보려면 이 링크를 사용하십시오.
https://codepen.io/felipperegazio/full/LYPvQBe

이 모달에는 추가된 동작이 없으며 스타일만 있습니다. 원하는 대로 하거나 열기, 닫기, 콜백 등에 JS 기능을 추가하는 방법에 대해 의견을 남겨주세요.

이제 모달 HTML부터 시작하겠습니다. 우리는 래퍼(배경이 될 것)와 헤더, 메인 콘텐츠, 푸터를 담을 콘텐츠 div가 필요합니다. 우리는 flexbox를 사용하고 있기 때문에 이 모달도 동적이므로 중단 없이 머리글이나 바닥글을 생략할 수 있습니다.

<div class="container">
  <div class="simple-modal" tabindex="0">
        <div class="simple-modal__content">
            <header>
                <h4>Title</h4>
                <span>close</span>
            </header>
            <div class="modal-main">
                          <!-- Content goes here -->
            </div>
            <footer>
        <button>Ok</button>
            </footer>
        </div>
    </div>
</div>

정말 간단하죠? 그것에 대해 별로 할 말이 없습니다. 컨테이너는 페이지에 있는 모든 것이 될 수 있으며 눈에 띄는 용도로만 사용할 수 있습니다(배경을 추가할 것입니다).

모달은 .simple-modal div에서 시작합니다. 이것은 우리의 래퍼와 배경이 될 것입니다. 여기에서 동작을 추가할 때 모달을 표시하거나 숨기기 위해 가시성 및 표시 규칙을 적용합니다.

그런 다음 헤더, 기본 콘텐츠 및 바닥글을 포함하는 모달의 콘텐츠가 될 .simple-modal__content div를 추가합니다.

따라서 필요할 수 있는 몇 가지 CSS 변수 정의를 시작하겠습니다.

.simple-modal {
  --gutter: 14px; // spacing reference
  --modal-color: #800000; // just color
  --soft-color: #fafafa; // just another color
}

그런 다음 래퍼/배경을 수행합니다.

.simple-modal {
  --gutter: 14px;
  --modal-color: #800000;
  --soft-color: #fafafa;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  padding-top: 2%;
}

요점: .simple-modal div가 화면에 고정되므로 모달 콘텐츠가 배치될 위치가 됩니다. z-index는 모달을 항상 다른 페이지 요소 앞에 유지합니다. padding-top은 수정할 수 있지만 책상에서 mobo로 2~3% 크기가 정말 적절하다고 생각합니다. 이 패딩은 페이지 상단에서 모달 콘텐츠가 얼마나 멀리 떨어져 있는지를 결정합니다.

이제 가운데에 빈 사각형인 콘텐츠 요소를 추가해 보겠습니다.
이를 위해 .simple-modal__content div를 사용합니다.

.simple-modal {
  /* ... previous stuff ... */
  &__content {
    width: 95vw;
    max-width: 600px;
    height: 90vh;
    max-height: 700px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin: 0 auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
  }
}

요점: 모달 a width: 95vw 와 max-width: 600px 가 주어지면 시작합니다. 따라서 모바일에도 잘 맞는 데스크톱에서 적절한 콘텐츠 너비를 얻습니다. < 600px 화면에서 너비는 95vh 또는 95%가 됩니다. 패딩을 에뮬레이션할 공간의 5%가 주어집니다. 높이와 최대 높이는 높이와 동일한 작업을 수행합니다.

그런 다음 적어도 display: flex는 모달 콘텐츠 요소에 대해 유동적인 동작을 제공합니다. 그러나 flex는 기본적으로 수평으로 구동되므로 flex-direction: column를 사용하여 수직으로 변경합니다. 이제 모달 콘텐츠에서 세로로 늘어납니다. 중앙 집중화margin:0 auto 및 원치 않는 스크롤 막대 방지overflow:hidden를 잊지 마십시오.

모달 요소를 추가할 시간입니다.
머리글, 주요 내용 및 바닥글

   header {
      min-height: 60px;
      height: 60px;
      color: #ffffff;
      background-color: var(--modal-color);
      display: grid;
      padding-left: var(--gutter);
      align-items: center;
      grid-template-columns: auto 60px;
      h4 {
        margin: 0;
        text-align: left;
      }
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        font-size: 20px;
        opacity: .8;
        cursor: pointer;
        &:hover {
          opacity: 1;
        }
      }
    }
    .modal-main {
      flex: 1;
      text-align: left;
      overflow: auto;
      padding: var(--gutter);
    }
    footer {
      height: auto;
      text-align: right;
      border-top: solid 1px #cccccc;
      padding: var(--gutter);
      background-color: #ffffff;
      background-color: var(--soft-color);
      button, input {
        margin: 0;
        &:not(:last-child) {
          margin-right: var(--gutter);
        }
      }
    }

코드의 이 부분은 거의 순수한 미학입니다. flex:1 의 .modal-main를 제외하고는 스타일 동작이 거의 추가되지 않았습니다.

flex 1은 .modal-main에게 가능한 한 부모를 따라 성장하도록 지시하지만 &__content div 제한에 의해 중지됩니다. 그런 다음 헤더에 min-height를 추가합니다. 바닥글 id는 높이를 지정하지 않고 아이들이 나를 대신하도록 하는 것을 선호하므로 바닥글이 비어 있을 때 바닥에 멋진 테두리가 될 것입니다.

결론

우리의 모달 콘텐츠 홀더는 열 방향이 있는 display:flex이므로 모든 콘텐츠는 메인 콘텐츠(flex 1)가 헤더를 손상시키지 않고 구분된 크기(&__콘텐츠 높이 및 너비)로 커지는 방식으로 수직으로 배치되지만 자랄 것이다. 메인 콘텐츠overflow:auto에 .modal-main를 추가하는 것도 중요하므로 .modal-main 안에 큰 콘텐츠를 담을 수 있습니다.

최종 코드는 다음과 같아야 합니다.

.simple-modal {
  --gutter: 14px;
  --modal-color: #800000;
  --soft-color: #fafafa;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  padding-top: 2%;
  &__content {
    width: 95vw;
    height: 90vh;
    max-height: 700px;
    max-width: 600px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin: 0 auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    header {
      min-height: 60px;
      height: 60px;
      color: #ffffff;
      background-color: var(--modal-color);
      display: grid;
      padding-left: var(--gutter);
      align-items: center;
      grid-template-columns: auto 60px;
      h4 {
        margin: 0;
        text-align: left;
      }
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        font-size: 20px;
        opacity: .8;
        cursor: pointer;
        &:hover {
          opacity: 1;
        }
      }
    }
    .modal-main {
      flex: 1;
      text-align: left;
      overflow: auto;
      padding: var(--gutter);
    }
    footer {
      height: auto;
      text-align: right;
      border-top: solid 1px #cccccc;
      padding: var(--gutter);
      background-color: #ffffff;
      background-color: var(--soft-color);
      button, input {
        margin: 0;
        &:not(:last-child) {
          margin-right: var(--gutter);
        }
      }
    }
  }
}

.container div를 사용하여 멋진 배경을 추가할 수 있습니다.

// just an eye candy
.container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(http://picsum.photos/2000);
}

그게 전부입니다 :)