기본 HTML: 대화 상자

몇 년 동안 모달dialog 상자를 만들려면 div를 만들고 숨긴 다음 사용자가 특정 작업을 수행할 때 표시해야 했습니다. 이것은 함께 던지기가 쉬웠지만 접근성이 좋지 않았습니다. 일반적인 오류는 탭 인덱스에 dialog의 요소를 남겨 두어 사용자가 이동하기 전에 dialog의 모든 요소를 ​​탭해야 한다는 것을 의미했습니다.

아마 해결하셨겠지만 기본 dialog 요소와 이를 사용하는 방법에 대해 작성하겠습니다. 글을 쓰는 시점에서 지원은 당연히 그다지 좋지 않습니다.

대화 상자 요소

나는 항상 Mozilla의 개발 사이트를 방문하여 새로운 요소에 대해 배우는 것을 좋아하므로 여기에서 설명합니다.

The HTML <dialog> element represents a dialog box or other interactive component, such as an inspector or window.

좋아, 하지만 그게 무슨 뜻이야? 구문은 충분히 간단해 보이므로 시도해 봅시다.

<dialog open> Test dialog </dialog>

지원되는 브라우저에서 어떻게 보이는지.



읽어주셔서 감사합니다... 오, 아직 끝나지 않았습니다. 우리는 dialog 와 상호 작용해야 합니다. 항상 거기에 있는 것은 그다지 도움이 되지 않습니다. Mozilla는 사용 예제를 제공하지만 이에 대한 정보는 제공하지 않으므로 다른 곳을 살펴보겠습니다.

w3 사양

확실하지 않은 경우 spec으로 이동하면 dialog와 상호 작용할 수 있는 3가지 기능이 있으며 각각 설명이 있습니다.

dialog . show( [ anchor ] )
Displays the dialog element.
The argument, if provided, provides an anchor point to which the element will be fixed.

dialog . showModal( [ anchor ] )
Displays the dialog element and makes it the top-most modal dialog.
The argument, if provided, provides an anchor point to which the element will be fixed.
This method honors the autofocus attribute.

dialog . close( [ result ] )
Closes the dialog element.
The argument, if provided, provides a return value.

이것을 실천에 옮기는

자, 이것은 이것을 실행에 옮기는 나만의 방법입니다. 이런 식으로 하면 안 된다고 생각하시면 알려주세요.
label 를 사용하면 레이블을 연결할 요소를 ID로 가리킬 수 있는 for 속성이 있습니다. 이것은 실제 속성이 아니기 때문에 data-modal-for 데이터를 갖도록 영감을 주었습니다.

<button data-modal-for="testDialog" open>Open modal</button>
<dialog id="testDialog">
  <h1>An example of a native Dialog element</h1>
  <p>This is a dialog box and, believe it or not, it's built into HTML, sure we needed some javascript to open it but hey, it's a start.</p>
  <button data-modal-for="testDialog" close>Close modal</button>
</dialog>

dialog {
  border: none;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  max-width: 60vw;
}

const modalTriggers = document.querySelectorAll(`[data-modal-for]`);

for (let trigger of modalTriggers) {
  const modal = document.getElementById(trigger.dataset.modalFor);
  trigger.addEventListener('click', () => {
    trigger.hasAttribute('open') && modal.showModal();
    trigger.hasAttribute('close') && modal.close();
  });
}

다음은 지원되는 브라우저에서 버튼을 누른 후의 모습입니다.

자바스크립트를 설명하라

나는 당신이 자바스크립트가 무엇을 하는지 알고 있다고 가정할 것이므로 내가 왜 이렇게 했는지 설명할 것입니다.

먼저 data-modal-for 속성을 지정한 모든 요소를 ​​선택한 다음 여기에 eventListeners를 추가합니다. 또한 trigger 요소에 open 또는 close 속성을 부여하여 dialog를 변경하는 방법을 지정합니다.

이것이 동적으로 생성된 요소가 즉시 작동하지 않는다는 것을 의미한다는 것을 알고 있지만 이것이 여전히 내가 생각할 수 있는 최선의 방법이었습니다.

종료

이 things we can't really use yet but maybe one day 게시물이 마음에 드시면 알려주세요. 플랫폼의 발전이 흥미롭고 공유하는 것을 즐깁니다.

읽어주셔서 감사합니다 🦄🦄😀😀❤🦄