JavaScript 대화 상자를 새로운 HTML 대화 상자로 바꾸십시오

JavaScript 대화 상자에 작별 인사를하고 HTML을 수용하십시오<dialog></dialog> 요소! 이 기사는 HTML 사용 방법을 보여줍니다<dialog></dialog> 요소 및 JavaScript 클래스는 기존의 JavaScript 대화 상자 ( alert() , confirm() 및 prompt() )를 우아하게 대체하고 사용자 경험 및 접근성을 향상시킵니다.

그 단조로운 스타일과 제한된 기능 JavaScript 대화에 지쳤습니까? 그들은 편리하지만 접근성, 스타일 커스터마이즈 및 현대화의 단점이 있습니다. 이 기사는보다 유연하고 강력한 대안을 제공 할 것입니다.

프로젝트에서 API 통화 및 JavaScript 대화 상자를 사용하여 사용자 피드백을 수집했습니다. 다른 개발자가 완료되기를 기다리고 있습니다<modal></modal> 구성 요소를 개발하는 동안 alert() , confirm() 및 prompt() 함수를 사용했습니다. 예를 들어:

 const deletelocation = 확인 ( '삭제 위치?');
if (deletelocation) {
  경고 ( '위치 삭제');
}

현재 alert() , confirm() 및 prompt() 자주 간과되는 모달 창 기능이 포함되어 있음을 깨달았습니다.

1. True Modal Window : z-index: 99999;<div> 위에.<li> <strong>키보드 액세스 :</strong> Enter를 누르면 확인을 확인하고 Escape를 눌러 취소하십시오.</li> <li> <strong>스크린 리더 친화적 :</strong> 초점을 이동하고 모달 창 함량을 읽을 수 있습니다.</li> <li> <strong>포커스 캡처 :</strong> 탭 키를 누르면 메인 페이지의 초점이 가능한 요소로 점프하지 않습니다 (그러나 Firefox 및 Safari에서는 포커스가 브라우저 UI로 점프합니다. 이상하게도 탭 키를 사용하여 포커스를 "허용"또는 "취소"버튼으로 이동하는 것은 불가능합니다).</li> <li> <strong>사용자 기본 설정 지원 :</strong> 명암 및 다크 모드는 상자 밖으로 지원됩니다.</li> <li> <strong>코드 실행 일시 정지 :</strong> 사용자 입력을 기다립니다.</li> <p> 이 JavaScript 방법은 99%의 사례에서 내 요구를 충족시킵니다. 그렇다면 왜 나 (및 다른 웹 개발자)가 자주 사용하지 않는 이유는 무엇입니까? 아마도 시스템 오류처럼 보이고 스타일을 지정할 수 없기 때문일 것입니다. 또 다른 중요한 고려 사항은 점차적으로 더 이상 사용되지 않는다는 것입니다. 첫 번째는 크로스 도메인 iframe에서 제거하는 것이며,이 계획은 일시 중지 된 것처럼 보이지만 향후 웹 플랫폼에서 완전히 제거된다고합니다.</p> <p> 이를 염두에두고 <code>alert() , confirm() 및 prompt() 대체 해야하는 대안은 무엇입니까? HTML에 대해 들어 보셨을 수도 있습니다<dialog></dialog> 요소,이 기사는 JavaScript 클래스와 함께 사용하는 방법에 중점을 둘 것입니다.

   JavaScript 대화 상자의 전체 기능을 완전히 복사하는 것은 불가능하지만<dialog></dialog> showModal() 메소드는 약속과 함께 사용되며 (약속은 (수락) 또는 거부 (취소)) 거의 동일한 기능을 얻을 수 있습니다. 한 걸음 더 나아가서 HTML을 위해하겠습니다<dialog></dialog> 요소는 실제 시스템 대화 상자와 마찬가지로 음향 효과를 추가합니다!

   지금 데모를보고 싶다면 여기를 방문하십시오.

   JavaScript Dialog 클래스

   먼저 기본 설정과 병합 될 설정 객체가 포함 된 기본 JavaScript 클래스가 필요합니다. 이 설정은 호출 할 때 (나중에 더 자세히 설명) 쓸어 내리지 않는 한 모든 대화 상자에 사용됩니다.

    기본 클래스 내보내기 대화 상자 {
     생성자 (settings = {}) {
       this.settings = object.assign (
         {
           / * 기본 설정 - 아래 설명 */
         },
         설정
       );
       this.init ();
     }
     // ...
   }

   설정에는 다음이 포함됩니다.

   • accept : "수락"버튼의 레이블.
   • bodyClass : 대화 상자가 열려 있고 브라우저가 지원하지 않습니다.<dialog></dialog> 요소의 CSS 클래스에 추가하면
   • cancel : "취소"버튼의 레이블입니다.
   • dialogClass : 추가하십시오<dialog></dialog> 요소에 대한 사용자 정의 CSS 클래스.
   • message :<dialog></dialog> 내부 컨텐츠.
   • soundAccept : "허용"버튼을 클릭 할 때 사용자가 수행하는 오디오 파일의 URL.
   • soundOpen : 대화 상자가 열릴 때 사용자가 수행하는 오디오 파일의 URL.
   • template : 옵션 HTML 템플릿에 주입됩니다<dialog></dialog> 가운데.

   초기화 템플릿 및 브라우저 지원 감지

   init 메소드에서는 브라우저의 HTML을 감지하기 위해 도우미 기능을 추가합니다.<dialog></dialog> 요소 지원 및 기본 HTML 설정 :

    init () {
     // 시험<dialog> htmldialogelement === 'function';
     this.dialog = document.createElement ( '대화');
     this.dialog.dataset.component = this.dialogsupported : 'no-dialog';
     this.dialog.role = '대화 상자';
   
     // html 템플릿 this.dialog.innerhtml =`
       <fieldset data-ref="fieldset" role="document">
   <legend data-ref="message"></legend>
   <div data-ref="template"></div>
   </fieldset>
   <menu></menu> `;;
   
     document.body.appendchild (this.dialog);
     // ...
   }</dialog>

   브라우저 쌍<dialog></dialog> 지원 상황은 다양하므로 탐지를 수행하고 폴백 솔루션을 제공해야합니다.

   (후속 단계는 원래 텍스트와 비슷하고 길이가 너무 길다. 여기서는 일부 코드 세부 사항이 생략되지만 주요 논리 및 코드 스 니펫이 유지되고 언어가 연마되고 조정됩니다.)

   ... (Dom Node 참조, 버튼 속성, 취소 버튼 이벤트, 브라우저를 지원하지 않는 폴리 플릴, 키보드 탐색, 디스플레이를 포함한 일부 코드 세부 사항을 생략하십시오.<dialog></dialog> , 사용자 입력을 기다리고 숨어 있습니다<dialog></dialog> , 포커스 처리, alert 추가, confirm 및 prompt 메소드, 비동기/대기, 크로스 브라우저 스타일, 사용자 정의 대화 상자 예제 등) ...

   요약

   이 기사의 솔루션을 통해보다 현대적이고 유연한 HTML을 쉽게 사용할 수 있습니다.<dialog></dialog> 요소는 기존 JavaScript 대화 상자를 대체하여 사용자 경험 및 응용 프로그램 접근성을 향상시킵니다. 특정 요구에 따라 스타일과 기능을 조정하여 자신에게 가장 적합한 사용자 정의 대화 상자를 작성하십시오.