대화 요소: 모달 및 팝업에 대한 새로운 접근 방식

안녕하세요, 여러분!

그래서 최근에는 dialog HTML 요소가 모든 최신 브라우저 엔진에서 안정되어 현재 프로젝트에서 안전하게 사용할 수 있습니다.

당신이 묻는 이 요소의 흥미로운 점은 무엇입니까?

단 몇 분 만에 웹 앱용 모달/팝업을 만드는 데 쉽게 사용할 수 있습니다. 이 요소는 동작을 제어하는 ​​데 사용할 수 있는 일부 메서드를 노출하고 완전히 사용자 지정할 수 있습니다.

이것은 React의 포털에 대한 훌륭한 대안으로 사용될 수 있습니다.

먼저 바닐라 JS 사용 사례를 살펴본 다음 맞춤 구성 요소를 사용하는 React의 사용 사례를 살펴보겠습니다.

뛰어들자....

HTML 요소

다음과 같이 dialog 태그를 사용하여 요소를 추가할 수 있습니다.

 <dialog open>
   <p>Dialog Content</p>
 </dialog>

open 속성은 대화 상자가 기본적으로 표시됨을 나타냅니다. 모든 사용 사례에 대한 양식과 같은 모든 종류의 UI를 내부에 추가할 수 있습니다. 자세한 내용은 아래에서 설명합니다.

행동 양식

이 요소에 사용할 수 있는 3가지 방법이 있습니다.

close() - 대화 상자 닫기

show() - 대화 상자를 표시합니다(버튼, 입력 등과 같은 배경 UI 요소는 여전히 상호 작용 가능하며 팝업에 사용할 수 있음)

showModal() - 일부 배경 오버레이를 사용하여 화면에 표시되는 다른 모든 UI 요소(열려 있는 다른 대화상자 포함) 위에 대화상자를 표시합니다(가장 높은 z-인덱스가 있다고 생각하면 배경 UI가 닫힐 때까지 상호작용할 수 없습니다. 모달에 사용 가능)

후자의 두 기능의 차이점은 다음과 같습니다.

Note, this example contains default browser dialog without any stylings

이벤트

이 요소는 현재 조건에 따라 두 개의 이벤트를 내보냅니다.

close - 예를 들어 Esc 키를 통해 대화 상자를 닫는 사용 가능한 내장 기능을 사용하여 사용자가 브라우저에 대화 상자를 닫으라고 지시하면 트리거됩니다.

cancel - 대화 상자가 닫히면 트리거됩니다. 앞의 경우에도 해당되므로 close 이후에도 트리거됩니다.

이 두 이벤트는 각각 기능 대안onclose 및 oncancel을 통해 사용할 수도 있습니다.

콘솔을 열고 X를 사용하여 대화 상자를 닫은 다음 Esc 키를 사용하십시오.

반환 값

대화 상자 요소의 이 속성을 사용하여 대화 상자를 닫는 데 사용된 버튼 값을 감지할 수 있습니다. 이것은 작동하지만

<form /> 속성이 method 로 설정된 "dialog" 내부 대화 상자가 있습니다. 그런 다음 양식을 제출하면 대화 상자가 자동으로 닫힙니다. 이 경우 returnValue는 제출 버튼의 값으로 설정됩니다.

  <form method="dialog" />

수동으로 닫은 경우 다음과 같이 버튼 클릭 이벤트 콜백에서 문자열을 대화 상자 닫기 함수 호출에 대한 인수로 전달합니다.

  dialog.close('This string will be assigned to returnValue');

지금까지 살펴본 모든 것을 사용하는 전체 양식 대화 상자입니다.

Note, that we are only updating the details if the form was submitted, not if user closed the dialog manually. This is detected based on the returnValue property value of the dialog.

오버레이 사용자 정의

대화 상자의 배경 오버레이는 ::backdrop 의사 요소를 사용하여 사용자 정의할 수 있으며 배경 속성을 설정해야 오버레이에 반영됩니다.

반응 대화 구성 요소

다음은 요구 사항에 따라 className prop으로 전달된 스타일과 자식으로 내용을 추가로 사용자 정의할 수 있는 대화 요소의 반응 구성 요소 버전입니다.



그게 다야, 이 사람들을 위해!
질문이나 제안이 있으시면 언제든지 저에게 연락해 주세요!

Github에서 나와 연결