JavaScript 대화 상자를 새로운 HTML 대화 상자로 바꾸십시오-CSS 튜토리얼-php.cn

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

Joseph Gordon-Levitt

풀어 주다： 2025-03-14 09:20:08

원래의

241명이 탐색했습니다.

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

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

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

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

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

로그인 후 복사

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

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 대화 상자를 대체하여 사용자 경험 및 응용 프로그램 접근성을 향상시킵니다. 특정 요구에 따라 스타일과 기능을 조정하여 자신에게 가장 적합한 사용자 정의 대화 상자를 작성하십시오.

위 내용은 JavaScript 대화 상자를 새로운 HTML 대화 상자로 바꾸십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!