HTMLlt;dialog> 요소 익히기: 모달을 위한 기본 솔루션

요소: 모달을 위한 네이티브 솔루션" />

소개: Dialog 태그는 HTML5에 도입되었으며 이것이 무엇을 의미하는지 더 이상 알 수 없습니다. 모달 및 팝업을 위해 Bootstrap과 같은 외부 솔루션에 연결되어 있습니다! HTML5의 기본 요소를 사용하면 코드에서 직접 대화 상자, 프롬프트 및 팝업을 만들 수 있습니다.

대화 상자 태그 안에 간단한 양식을 만들고 클릭하면 마술처럼 양식이 열리는 버튼을 만들어 보겠습니다.

대화 상자 만들기(생각보다 간단합니다!):

<dialog id="my-dialog">
    <div class="content">
      <form method="dialog">
        <p>Form inside a dialog</p>
        <div>
          <label for="name">Name: </label>
          <input type="text" id="name" name="name" />
        </div>
        <menu>
            <button type="submit">Submit</button>
            <button type="button">Cancel</button>
        </menu>
      </form>
    </div>
</dialog>
<button class="open-btn">Open Dialog</button>

설명: 그 안에 자리잡은 형태를 만들었습니다. 양식에서는 이름을 묻습니다(물론 이름을 지정하는 것이 프로그래밍에서 가장 어려운 부분이기 때문입니다). 양식을 제출하기 위한 CTA와 취소하기 위한 CTA 두 개를 추가했습니다. 쉽네요.

대화상자 표시 여부를 전환해 보겠습니다.

대화상자는 기본적으로 수줍어하지만(즉, 숨겨져 있음) 걱정하지 마세요! 약간의 JavaScript를 사용하면 이를 실행에 옮길 수 있습니다! 마법 주문은 다음과 같습니다.

<script>
   const dialog = document.getElementById("my-dialog");

   function showDialog() {
     dialog.showModal();
   }

   function closeDialog() {
     dialog.close();
   }
</script>

설명: querySelector를 사용하여 대화 상자를 선택합니다. 그런 다음 대화 상자를 여는 함수와 닫는 함수 등 두 가지 함수를 작성합니다. 그대로 - 명령에 따라 대화상자가 열리고 닫힙니다!

HTML 코드 실행:

<dialog id="my-dialog" open="true">
   <div class="content">
     <form method="dialog">
       <p>Form inside a dialog</p>
       <div>
         <label for="name">Name: </label>
         <input type="text" id="name" name="name" />
       </div>
       <menu>
         <button type="submit">Submit</button>
         <button type="button" onclick="closeDialog()">Cancel</button>
       </menu>
     </form>
   </div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>

설명:

1. '취소' 버튼에 closeDialog()를 첨부했습니다.
2. "열기" 버튼은 showDialog()를 사용하여 대화 상자를 엽니다.

이제 여러분이 무슨 생각을 하시는지 알겠습니다. "하지만 사용자가 양식 외부(배경)를 클릭하면 어떻게 될까요?" 걱정하지 마세요. 제가 도와드리겠습니다!

배경화면을 클릭하면 대화상자를 닫습니다.

dialog.addEventListener("click", function (event) {
     if (event.target === dialog) {
       closeDialog();
     }
});

설명: 배경화면을 클릭하면 대화상자를 닫는 이벤트 리스너를 대화상자 자체에 추가했습니다. 콘텐츠 div는 우리의 보호 장치입니다. 내부를 클릭하면 대화 상자가 그대로 유지됩니다. 그런데 밖을 클릭한다고요? 펑! 사라졌어요.

대화 스타일을 지정할 시간:

다음은 대화 상자를 멋지게 꾸밀 수 있는 몇 가지 기본 스타일입니다. 또한 주변의 모든 것을 가리지 않도록 매끄러운 모달 모양에 배경 투명도를 추가할 것입니다."

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#my-dialog {
  top: 50%;
  left: 50%;
  width: 60vw;
  position: absolute;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

#my-dialog .content {
  padding: 28px;
}

#my-dialog .content form {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  opacity: 0.5;
  background-color: #898989;
}

.open-btn {
  padding: 5px 10px;
}

직접 시도해 보세요! ?

실제 대화를 보고 싶으십니까? 이 코드 샌드박스를 확인하세요:

? 코드 샌드박스를 열려면 여기를 클릭하세요!

코드를 가지고 놀고, 수정하고, 마법이 일어나는 것을 실시간으로 지켜볼 수 있습니다. ?✨

결론:

그렇습니다! 이제 HTML5 요소를 마스터했습니다. 팝업, 프롬프트 또는 전체 양식을 생성하려는 경우 태그는 새로운 가장 친한 친구입니다.

하지만 시작하기 전에 다음과 같은 전문가 팁이 있습니다. 전체 프로젝트에 대해 재사용 가능한 대화 상자 구성 요소를 만들어야 합니다.

이 게시물이 여러분의 삶을 더 편하게 만들었다면 이 게시물에 좋아요를 누르고, 공유하고, 사랑을 표시하는 것을 잊지 마세요.

즐거운 코딩하세요!

위 내용은 HTMLlt;dialog> 요소 익히기: 모달을 위한 기본 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!