CSS: modal ​

.instui-modal — 대화상자 표면(네이티브 <dialog>에서 작동); 헤더/본문/풋터 파트.

개별 파트에 대해서는 modal.header, modal.body, 및 modal.footer 멤버를 참조하십시오.

Source: body.css

TIP

JS 향상 — 이 컴포넌트의 CSS는 자체적으로 렌더링되고 동작합니다; 상호작용 동작을 추가하려면 @pantoken/interactions와 짝지으세요. 아래 수정자 표를 참고하세요.

접근성 ​

모달 동작과 Esc로 닫기 기능을 위해 네이티브 <dialog>를 showModal()로 열고, .header를 가리키는 aria-labelledby로 이름을 지정하십시오.

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/modal.css";

데모 ​

예제들 ​

html
<dialog class="instui-modal -size-sm" id="modal-sm">
  <div class="header"><strong>Small</strong></div>
  <div class="body"><code>-size-sm</code> — a narrow modal.</div>
  <div class="footer">
    <button class="instui-button">Close</button>
  </div>
</dialog>

구조 ​

text
.instui-modal
  modal.header (component)
  modal.body (component)
  modal.footer (component)
flowchart TD n0[".instui-modal"]:::cssdoc-root n1(["modal.header"]):::cssdoc-component n2(["modal.body"]):::cssdoc-component n3(["modal.footer"]):::cssdoc-component n0 --> n1 n0 --> n2 n0 --> n3 click n1 "/api/css/modal.header.md" click n2 "/api/css/modal.body.md" click n3 "/api/css/modal.footer.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자 ​

수정자설명
.-blur모달 뒤의 백드롭을 블러 처리합니다.
.-color-inverse다크 배경용 크롬(미디어 본문과 짝을 이룸). @affects modal.header @affects modal.body @affects modal.footer — 각 파트를 온-다크 룩으로 재색상합니다.
.-density-compact파트 패딩을 더 좁게. @affects modal.header @affects modal.body @affects modal.footer — 각 파트의 패딩을 조입니다.
.-overflow-fit뷰포트로 제한하고 본문을 스크롤합니다. @affects modal.body — 모달이 뷰포트에 맞춰 제한될 때 본문을 스크롤합니다.
.-size-auto콘텐츠 크기에 맞게 사이즈 조정됨.
.-size-fullscreen가로 끝까지(엣지-투-엣지).
.-size-large와이드 모달. -size-lg의 장문(alias).
.-size-lg와이드 모달.
.-size-sm좁은 모달.
.-size-small좁은 모달. -size-sm의 장문(alias).

의사 요소 ​

의사 요소설명
::backdrop대화상자 뒤의 페이지를 마스크로 어둡게 하고, -blur 아래는 서리 낀(frosted) 효과를 줍니다.

사용된 토큰 ​

Token타입값
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))
--instui-component-modal-auto-min-width<length>16em
--instui-component-modal-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-modal-border-color<color>LightDarklight-dark(#E8EAEC, #334450)
--instui-component-modal-border-radius<length>1rem
--instui-component-modal-border-width<length>0.0625rem
--instui-component-modal-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-modal-inverse-background-color<color>LightDarklight-dark(#273540, #1C222B)
--instui-component-modal-inverse-border-color<color>#334450
--instui-component-modal-inverse-text-color<color>#ffffff
--instui-component-modal-large-max-width<length>62em
--instui-component-modal-medium-max-width<length>48em
--instui-component-modal-small-max-width<length>30em
--instui-component-modal-text-color<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-elevation-topmostnone | <shadow>#—
--instui-spacing-space-xl<length>1.5rem

브라우저 지원 ​

  • 네이티브 <dialog>와 그 ::backdrop에 스타일을 적용합니다; 최상위 레이어 렌더링과 백드롭 스타일링은 dialog 요소를 지원하는 브라우저가 필요합니다.

하위 컴포넌트 ​

관련 항목 ​

  • tray — 트레이는 동일한 해제 가능한 오버레이 패턴이며 화면 가장자리에 고정됩니다.