2022년의 대화

<dialog> HTML 요소 소개

<div>를 페이지의 최상위 수준으로 "호이스트"할 방법이 없었기 때문에 대화 상자를 관리하기가 특히 어려웠습니다. React와 같은 프레임워크에서는 이 기능을 제공하는 라이브러리를 사용하여 이 문제를 해결할 수 있습니다. 그러나 우리는 여전히 다른 사람에게 문제를 처리하고 그들의 솔루션에 의존하고 있습니다.
<dialog> HTML 요소는 코드베이스를 단순화하고 응용 프로그램의 중요한 부분에 집중할 수 있게 해줍니다. Safari 및 2022년 3월 이후 Firefox 지원<dialog>. Chrome은 이미 2014년부터 지원하고 있었습니다.
<dialog> 요소의 주요 장점:

외부 라이브러리 없이 대화 상자 및 모달을 만드는 쉬운 방법을 제공합니다

.

코드베이스를 단순화하고 개발자 경험을 개선합니다

자동으로 대화 상자 뒤에 있는 콘텐츠에 대한 액세스를 방지합니다

.

은 일반 스태킹 컨텍스트

위의 최상위 레이어에 존재합니다.

사용 방법

대화 상자는 사용이 매우 간단합니다. 먼저 표시할 콘텐츠가 있는 <dialog> 요소를 렌더링해야 합니다.

<dialog>
  <h1>Hello World</h1>
  <p>This is a dialog</p>
</dialog>

그 외에도 showModal() 요소에서 <dialog>를 호출하여 표시하고 close를 호출하여 닫으면 됩니다. ESC를 눌러 대화 상자를 닫을 수도 있습니다. 원하는 경우 대화 상자의 event.preventDefault() 이벤트에 있는 close 기능을 사용하여 이 동작을 비활성화할 수 있습니다.

간단한 HTML 및 JavaScript 예제

이 예에서는 일반 HTML과 JavaScript를 사용하고 있습니다. live demo 에서 작동하는 예제를 볼 수 있습니다.

<button id="openDialog">Open dialog</button>
<dialog id="myDialog">
  <h1>Hello World</h1>
  <p>This is a dialog</p>
  <button id="closeDialog">Close</button>
</dialog>

const myDialog = document.getElementById("myDialog");

const openDialogButton = document.getElementById("openDialog");
openDialogButton.addEventListener("click", () => {
  myDialog.showModal();
});

const closeDialogButton = document.getElementById("closeDialog");
closeDialogButton.addEventListener("click", () => {
  myDialog.close();
});

반응 예

이 예제에서는 대화 상자를 표시하기 위해 React 구성 요소를 만듭니다.

import { useRef } from "react";

export const Dialog = () => {
  const myDialog = useRef();

  return (
    <div>
      <button onClick={() => myDialog.current.showModal()}>Open dialog</button>
      <dialog ref={myDialog}>
        <div>
          <p>Hello world!</p>
          <p>Press ESC or click the button to close.</p>
          <button onClick={() => myDialog.current.close()}>Close</button>
        </div>
      </dialog>
    </div>
  );
};

post in my blog 의 끝 부분에서 작동 중인 React 구성 요소를 볼 수 있습니다.

참조

Introducing the Dialog Element - WebKit

<dialog>: The Dialog element - MDN