기본 대화 모달 시도

플러그인을 사용하는 대신 creating your modal에 기사를 썼습니다.

저번에 트위터에 다시 올렸는데 요즘 대화 요소로 빨리 할 수 ​​있을 것 같다는 좋은 댓글을 남겼습니다.

나는 Astro version powered by dialog을 만들었지만 여러분을 위해 일반 버전을 적어두지는 않았습니다.
따라서 이 기사에서는 dialog 요소를 사용하여 모달을 생성합니다.

대화 상자 요소

오늘 작업할 주요 요소는 dialog 요소입니다.
이것은 기본적으로 대화상자(모달이 아님)인 HTML 요소입니다.

열려 있는지 여부를 나타내는 열린 상태를 취할 수 있습니다.

<dialog open>
  <p>Hello from the dialog</p>
</dialog>

위의 코드는 다음과 같이 페이지에서 직접 대화 상자를 렌더링합니다.



모달이 아니며 이런 식으로 배경이 없다는 것을 알 수 있습니다.

동적으로 모달 열기

우리는 일반적으로 몇 가지 작업으로 대화 상자를 열기를 원합니다.

다행스럽게도 대화 상자에는 JavaScript API가 함께 제공됩니다.
대화에 특정 ID를 지정하면 대화를 타겟팅할 수 있습니다.

<dialog id="mydialog">
  <p>Hello I only show on click</p>
</dialog>

그런 다음 JavaScript를 사용하여 이와 같은 모달을 열 수 있습니다.

window.mydialog.show();

그러나 더 명시적인showModal 함수를 사용하는 것이 좋습니다.
이것은 모달로 만들어 배경을 만들고 페이지의 대화 상자를 중앙에 배치할 수 있습니다.

window.mydialog.showModal();

물론 브라우저에서 직접 대화 상자를 표시하는 것은 매우 드문 일이므로 버튼을 클릭할 때만 표시하도록 합시다.

<button onclick="window.mydialog.showModal();">show modal</button>

<dialog id="mydialog">
  <p>Hello I only show on click</p>
</dialog>

모달 닫기

모달을 닫는 방법에는 두 가지가 있습니다. 첫 번째는 다음과 같이 대화 상자에서 close 함수를 사용하는 것입니다.

<button onclick='window.mydialog.close();'>close modal</button>

또는 대화 상자를 닫는 HTML 방식을 사용할 수 있습니다.
dialog 요소 안에 메서드 대화 상자가 있는 양식을 넣을 수 있습니다.

<form method="dialog">
  <button>Close</button>
</form>

모달 배경 스타일 지정

대화 상자가 멋진 이유의 마지막 부분은 일부 사용자 지정 요소의 스타일을 지정할 수 있다는 것입니다.

모달의 배경 스타일을 지정하기 위해 ::backdrop라는 새로운 의사 요소를 얻습니다.

dialog::backdrop {
  background: rgba(255, 0, 0, 0.1);
}

이제 모달을 열면 배경색이 분홍빛이 됩니다.

물론 대화 상자의 모든 요소를 ​​원하는 대로 스타일을 지정할 수 있습니다.

접근성 문제

현재까지도 접근성 문제가 제기되고 있다는 점에 유의하는 것이 좋습니다.

그러나 사용해 본 결과 요즘 대부분의 브라우저는 대화 상자 내에서 포커스를 완벽하게 지원하며 완전한 액세스 가능 솔루션을 찾고 있습니다.

Read more about the concerns .

결론

대화 상자 요소, 노출된 API 및 스타일 지정 옵션은 요즘 모달을 만드는 좋은 방법입니다.

나는 곧 프로젝트에서 그것들을 시험해 볼 것이라고 확신합니다.

대화 상자 요소를 가지고 놀고 싶다면 사용해 볼 수 있도록 이 CodePen을 만들었습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나