html5.2 대화 상자 소개-H5 튜토리얼-php.cn

이 글은 html5.2 대화 상자의 세부 소개에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

2017년 12월 24일 HTML5.2 표준이 확정되었습니다. 이는 모바일 단말기가 HTML5.3 계획 단계에 진입했다는 의미이기도 하지만, HTML5.2가 확정되었지만 일부 새로운 내부 사양은 확정되지 않았습니다. 브라우저의 지원은 여전히 개선될 필요가 있습니다. 여기서는 표준에 새로 포함된 일반적으로 사용되는 태그인 대화 상자 태그를 살펴보겠습니다.

1. 앞에 쓰기

Dialog 태그라고 하면 아무래도 이 태그는 낯설으신 분들이 많을 텐데요. HTML5.2 표준까지 수정되었으며 Chrome 브라우저에서만 지원됩니다. 이 태그의 목적은 세션이라는 의미로 명확하게 이해될 수 있습니다.

여기서 생각할 수 있는 것은 알림, 확인 및 기타 팝업 창입니다. 네, 모두 같은 계열에 속하며, 다음으로 간단히 살펴보겠습니다. 대화 상자 태그. 일부 속성 및 사용 시나리오.

2. 태그를 사용하세요

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

로그인 후 복사

태그이므로 , 실제로는 우리가 일반적으로 사용하는 p, p 및 기타 태그와 동일합니다. 위의 샘플 코드에서 볼 수 있듯이 내부적으로 다른 요소를 지원합니다.

여기서 위 샘플 코드의 open 속성은 이 팝업 창의 표시 및 숨기기를 제어하는 데 사용됩니다. 물론 다음과 같이 할 수도 있습니다. CSS를 사용하여 제어하는 것을 좋아하지만, 그럴 경우 일부 기기의 보조 기능(접근성, 화면 읽기 소프트웨어 등)을 사용할 때 이상이 발생하므로 표준에 있는 표시 및 숨기기 기능을 사용하는 것이 좋습니다. .

3. 지원되는 기본 메소드

먼저 대화 상자 태그는 HTMLElement에서 상속된 HTMLDialogElement의 예이므로 다음과 같습니다. p와 동일 a의 레이블은 동일한 수준에 속하는 레이블입니다. 유일한 차이점은 p보다 더 많은 기본 기능을 가지고 있다는 것입니다. 이 섹션에서는 대화 상자가 사용할 수 있는 기본 메서드를 살펴보겠습니다. .

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

로그인 후 복사

먼저 예제로 가서 실행해보고 어떤 기능이 있는지 확인하고 다시 와서 비교해보시면 됩니다 , 계속 요약:

1: close 메소드는 여러 번 호출할 수 있으며 숨겨진 상태에서도 다시 호출할 수 있습니다.

2: close는 문자열이어야 하고 returnVlaue로 표현되는 변수를 전달할 수 있습니다.

3: show 메소드는 숨겨진 상태에서도 문제 없이 여러 번 호출할 수 있습니다.

4: show 메소드가 호출된 후에도 팝업 상자는 여전히 원래 위치에 있습니다.

5: 표시 방법, 표시 위치는 이전 요소 바로 뒤에 있고 중앙에 있으며 뒤에 마스크 레이어가 없으며 z-index의 표시 모드는 z-를 설정하지 않고 상대 모드와 유사합니다. 인덱스(이전의 경우 showModal이 호출되지 않은 경우)

6: showModal이 호출된 경우 show 메소드 이후 요소는 showModal이 표시한 위치에 표시되며 변경되지 않습니다(콘텐츠 높이가 많이 변경되더라도).

7: 두 개의 대화 상자 요소가 있는 경우 둘 다 show 메소드를 호출합니다. html 구조에서 후속 대화 상자는 항상 이전 상위 레이어를 덮습니다(어떤 대화 상자가 show 메소드를 먼저 호출하는지에 관계 없음).

8: showModal 표시 뒤에 마스크 레이어가 있습니다. 표시 수준은 브라우저 웹뷰 수준입니다. 어떻게 이해해야 할까요? 대화 상자를 표시하려면 속성 뒤에 대화 상자가 항상 앞에 있으므로 특히 팝업 상자가 나타난 후에는 계층적 혼란이 발생하지 않습니다.

9: showModal은 한 번만 호출할 수 있습니다. 여기서 한 번은 대화 상자가 표시 상태인 경우 showModal을 다시 호출하면 오류가 보고되며 직접 실행할 수 없음을 의미합니다. , 또는 open 속성이 존재하는 한 이 경우 다시 호출하면 오류가 보고되므로 대화 상자를 표시하거나 숨기려면 기본 open 속성을 사용하는 것이 좋습니다.

10: 페이지에 두 개의 대화 상자 요소가 있고 둘 다 showModal 메서드를 호출하는 경우 HTML의 구조에 관계없이 나중에 호출되는 대화 상자의 수준은 대화 상자의 수준보다 높습니다. 이전에 전화했습니다. #… 입력한 내용이 유효합니다. #… 닫혀도 returnVlaue는 여전히 "1"과 같습니다.

13: open의 반환 값은 true/false입니다.

4. 지원되는 기본 이벤트

dialog 또 다른 이점은 click과 같은 두 가지 추가 기본 이벤트를 지원한다는 것입니다. 대화를 위한 특별 이벤트: # 🎜🎜#

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后，好像不管用了。
dialog.oncancel = function(){};

로그인 후 복사

이제 예를 살펴보겠습니다. 대화 상자 이벤트 예시 표시.

또한 몇 가지 문제가 있습니다. 다음은 몇 가지입니다.

1: 대화 상자를 숨기기 위해Dialog.close()를 호출해야만 onclose 이벤트가 트리거될 수 있습니다.

2: 취소 이벤트가 발생한 후에는 반드시 닫기 이벤트가 계속 발생합니다. chrome64 버전 이후에는 esc 키로 취소가 발생하지 않습니다.

3: 대화 상자를 닫는 버튼이 여러 개 있는 경우 닫기 이벤트의 콜백에서 returnVlaue 값을 사용하여 닫기를 트리거하는 데 사용되는 버튼을 결정합니다. 이벤트.

5. 기타

대화의 일부 기능은 불완전하거나 부정확할 수 있으며 시간이 지남에 따라 새로운 기능이 나타날 수 있습니다.

이전 예제를 보면 다음과 같은 몇 가지 단점도 발견했습니다. 스타일이 특히 보기 흉합니다. 이에 관해 CSS를 사용하여 의미나 다른 것에 영향을 주지 않고 스타일을 완전히 재설정할 수 있습니다. 그것.

여기서는 대화의 성능에 대해서만 이야기하고 싶기 때문에 그런 이야기는 하지 않겠습니다.

6. 요약

dialog는 결국 팝업 대화 상자의 의미 태그이며 몇 가지 고유한 장점(예: 웹뷰 수준의 높이)이 있지만 현재는 Chrome에서만 지원됩니다. 나중에 사용하는데 여전히 매우 유용합니다. 이제 호환되도록 만들고 다른 브라우저에서 직접 대화 상자 메커니즘을 구현할 수도 있습니다(이미 이에 대한 구현 계획이 있을 수 있으므로 여기서는 찾지 않겠습니다).

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!