HTML 요소 탐색:

데모

소개

대화 상자 요소는 한동안 모든 브라우저에서 널리 지원되었으며, 사용 중인 프레임워크에 관계없이 이 요소가 어떻게 코드의 생산성과 품질을 크게 향상시킬 수 있는지 보여드리고자 합니다.

아름답고 간단한 구성 요소를 만드는 데 많은 코드 줄이 필요하지 않다는 것을 보여주기 위해 일반 JavaScript를 사용하고 있습니다.
이 요소를 사용하는 것은 매우 간단합니다.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

위에서 볼 수 있듯이 대화 상자 요소의 참조를 가져와 다음 두 함수 중 하나를 호출하면 됩니다.

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

하지만 궁금하실 수도 있습니다.

두 기능의 차이점은 무엇인가요?

글쎄, 그것을 이해하려면 레이어와 최상위 레이어가 무엇인지 조금 이해해야 합니다.

레이어

서랍 구성 요소를 사용할 때 이전에 접했을 수 있는 내용의 예를 들어 보겠습니다. 일반적으로 HTML에서 구성 요소를 호출하면 전체 화면에서 열리지 않고 배치한 컨텍스트에서만 열리게 되므로 전체 뷰포트에서 열거나 채우려면 index.html에 서랍을 배치해야 합니다. 위치와 Z-인덱스가 포함된 CSS를 사용하여 겹치는 컨텍스트를 생성하세요.

레이어를 사용하면 이 작업이 더 쉬워지지만 결국 CSS 문서가 약간 오염될 수도 있습니다. showModal()을 사용하면 구성이 필요 없이 이미 별도의 컨텍스트가 있는 해당 최상위 계층의 대화 상자 요소가 열립니다. show()를 사용하면 해당 최상위 레이어에서 대화 상자를 호출하지 않으며 뷰포트의 정상적인 동작을 가질 수 있습니다.

최상위 레이어는 전체 뷰포트에 걸쳐 확장되고 사용자 또는 웹 브라우저에서 생성된 모든 레이어를 오버레이하는 '레이어'입니다. 이는 많은 도움이 되며 악명 높은 과도한 프롭 드릴링을 방지합니다.

알겠습니다. 그런데 이 요소의 스타일을 어떻게 지정하나요? 많이 힘들겠군요!

전혀 그렇지 않습니다! div를 중앙에 배치하는 것만큼 간단합니다... 어쩌면 좀 더!

대화상자/모달

보다 심도 있는 스타일화를 원하시면 Kevin Powell의 영상을 시청해 보시기 바랍니다.

대화상자의 스타일을 지정하려면 요소에 ID/클래스를 넣고 CSS를 사용하면 됩니다.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

위에서 볼 수 있듯이 #dialog[open]을 사용하여 요소의 위치를 ​​수정했습니다. 대화 상자를 생성하면 기본적으로 표시가 비활성화된 상태로 제공됩니다.

이 속성은 두 함수 중 하나를 호출할 때만 추가됩니다.
따라서 대화 상자 요소의 스타일을 지정할 때 항상 클래스/ID 이름과 속성을 사용하여 표시 문제를 방지하세요.
위에서 볼 수 있듯이 대화 상자에는 이미 ::배경 효과가 포함되어 있으며 수정하는 것도 매우 간단합니다.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

쇼! 매우 쉽습니다! 하지만 이 모달을 어떻게 닫나요? 배경화면을 클릭해도 아무 일도 일어나지 않습니다!

가자! 기본적으로 요소에는 이러한 가능성이 제공되지 않습니다. 모달을 닫으려면 내부 버튼 등을 사용하여 닫는 함수를 호출해야 합니다.

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

그러나 외부를 클릭하여 닫는 효과를 복제하려면 간단한 기능을 사용하여 대화 상자 요소의 가장자리를 식별하여 외부를 클릭했는지 여부를 알 수 있습니다.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

동작은 다음과 같습니다.

이것이 꾸준히 하고 싶다면 Popover API를 보시길 권합니다.

아, 그거 못생겼어! 내 라이브러리에 이미 애니메이션이 적용되었습니다!

걱정하지 마세요! 간단한 페이드인 애니메이션을 추가해 보겠습니다.

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

페이드 아웃 애니메이션을 추가하는 것은 사용자가 언제 모달을 닫을지 식별할 방법이 없기 때문에 조금 더 어렵습니다. 따라서 스크립트 파일을 변경해야 합니다.

dialog.close();

두 가지 중요한 일이 이루어졌습니다.

1. 모달을 닫는 애니메이션의 지속 시간을 결정하는 새로운 매개변수가 추가되었습니다(몇몇 검색 끝에 Kevin Powell의 동영상을 찾았습니다).

2. 사용자가 클릭하면 닫기라는 속성을 추가했습니다. 위에서 언급한 시간 매개변수를 사용하여 제거됩니다.
   

/** @type {HTMLDialogElement} */
const dialog = document.getElementById('dialog');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
 const closeByClickingOutside = (dialogRef) => {
  dialogRef.addEventListener('click', (ev) => {
    if (
      ev.offsetX < 0 ||
      ev.offsetX > ev.target.offsetWidth ||
      ev.offsetY < 0 ||
      ev.offsetY > ev.target.offsetHeight
    ) {
      dialogRef.close();
    }
  });
};

closeByClickingOutside(dialog);

라이브러리 없이 완전히 애니메이션된 대화 상자가 있습니다!

좋네요! 그런데 이 요소를 이용해 어떻게 서랍을 만들었나요?

이를 달성하려면 대화 상자 요소의 기본 스타일을 가져와 덮어써야 합니다...

서랍

서랍은 화면 위로 전체 높이로 열립니다. 그럼 처음부터 새로운 서랍 요소를 만들어 보겠습니다.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

서랍을 화면의 전체 높이로 설정하려면 대화 상자의 기본 최대 높이를 덮어써야 한다는 점에 유의하는 것이 중요합니다!

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

이제 간단합니다. 단계별 대화 상자에서 만든 것과 동일한 기능을 사용하여 애니메이션을 추가하기만 하면 끝입니다!

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

<대화상자>



<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173086397449699.jpg" class="lazy" alt="EXPLORING HTML ELEMENTS: <DIALOG>"></p>

<h2>
  
  
  읽어주셔서 감사합니다
</h2>

<p>이게 첫 번째 게시물이므로 읽어주셔서 감사합니다. 어떤 식으로든 도움이 되었다면 linkedin에서 저를 팔로우하는 것이 좋습니다. 제 모국어는 포르투갈어이므로 대부분의 게시물이 포르투갈어로 되어 있지만 뭔가 게시하려고 합니다. 영어로도. 앞으로 비슷한 내용을 게시할 예정입니다. 이 모달 및 서랍 전략을 개선하는 방법에 대한 권장 사항이 있으면 그곳으로 보내주세요.</p>


          

            
        

위 내용은 HTML 요소 탐색: 의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!