집 > 기사 > 웹 프론트엔드 > HTML5 대화 상자 사용법에 대한 자세한 설명

HTML5 대화 상자 사용법에 대한 자세한 설명

小云云원래의: 2018-03-01 09:18:316256검색

1.앞에 작성

대화상자 태그라고 하면 많은 분들이 낯설으실 수도 있겠지만, 결국 이 태그는 HTML5.2 표준까지는 수정되지 않았고, 크롬 브라우저에서만 지원이 되었습니다. 이 태그를 사용하면 의미론적으로 대화도 명확하게 이해할 수 있습니다.

여기서 생각할 수 있는 것은 경고, 확인 및 기타 팝업 창입니다. 예, 이들은 모두 동일한 계열에 속하며 모두 팝업 상자입니다. 다음으로 몇 가지 속성과 사용 시나리오를 간략하게 살펴보겠습니다. 대화 상자 태그의

2. 태그 사용법

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

태그이기 때문에 실제로 우리가 흔히 사용하는 p, p 및 기타 태그와 동일하며, 내부적으로는 다른 요소를 모두 지원합니다. .

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

3. 기본 메소드 지원

우선, 대화 상자 태그는 HTMLElement에서 상속된 HTMLDialogElement의 예이므로 p 태그와 동일한 수준의 태그라는 점만 다릅니다. 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 메소드는 토스트의 위치를 변경하지 않습니다. show 메소드가 호출된 후에도 팝업 상자는 여전히 원래 위치에 있습니다.

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

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

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

8: showModal 표시 뒤에 마스크 레이어가 있습니다. 표시 수준은 브라우저 웹뷰 수준입니다. 어떻게 이해해야 할까요? showModal을 사용하여 대화 상자 속성을 표시할 수 있습니다. , 대화 상자는 전면에 표시되며 이는 특히 모달 상자에 적합합니다. 팝업 상자가 나타난 후에는 계층적 혼란이 발생하지 않습니다.

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

10: 페이지에 두 개의 대화 상자 요소가 있고 둘 다 showModal 메서드를 호출하는 경우 HTML의 구조에 관계없이 나중에 호출되는 대화 상자의 수준은 이전에 호출된 대화 상자의 수준보다 높습니다.

11:Dialog.returnVlaue의 값은Dialog.close(문자열)을 호출할 때 전달되는 값입니다.Dialog.close를 호출하여 전달된 값은 대화 상자가 표시될 때만 유효합니다.

12: close에 값이 전달되지 않으면 returnVlaue의 값은 비어 있습니다. 값이Dialog.close("1")로 한 번 전달되면 다음 표시 이후에Dialog.close()가 닫히고 returnVlaue가 됩니다. 여전히 "1"과 같습니다.

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

4. 지원되는 기본 이벤트

dialog의 또 다른 장점은 클릭과 같은 기본 이벤트 외에도 대화에 대한 두 가지 추가 특별 이벤트를 지원한다는 것입니다.

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에서만 지원됩니다. 나중에 사용하는데 여전히 매우 유용합니다. 이제 호환되도록 만들고 다른 브라우저에서 직접 대화 상자 메커니즘을 구현할 수도 있습니다(이미 이에 대한 구현 계획이 있을 수 있으므로 여기서는 찾지 않겠습니다).

HTML5 대화 상자 사용법에 대한 자세한 설명

관련 기사