2017년 12월 24일 HTML5.2 표준이 확정되었으며 이는 모바일 단말기가 HTML5.3 계획 단계에 진입했음을 의미하지만 HTML5.2가 확정되었지만 일부 새로운 내부 사양은 아직 모바일 브라우저에서 지원되지 않습니다. 개선을 위해 여기서는 표준에 새로 포함되어 일반적으로 사용되는 태그인 대화 상자 태그를 살펴보겠습니다.
1. 앞에 쓴다대화 상자 태그에 대해 말하자면, 이 태그는 HTML5.2 표준이 수정되기 전까지는 Chrome 브라우저에서만 지원되었으므로 이 태그의 사용 방식을 보면 명확하게 알 수 있습니다. 세션.
여기서 생각할 수 있는 것은 경고, 확인 및 기타 팝업 창입니다. 그렇습니다. 모두 동일한 계열에 속하며 다음으로 몇 가지 속성과 사용 시나리오를 간략하게 살펴보겠습니다. 대화상자 태그.
2. 라벨 사용<dialog open=> <h2>제목</h2> <p>내용</p></dialog>
태그이기 때문에 실제로는 우리가 흔히 사용하는 div, p, 기타 태그와 동일합니다. 위의 샘플 코드에서 볼 수 있듯이 내부적으로는 다른 요소를 모두 지원합니다.
여기에서 위 샘플 코드의 open 속성이 이 팝업 창의 표시 및 숨기기를 제어하는 데 사용된다는 것을 알 수 있습니다. 물론 CSS를 사용하여 임의로 제어할 수도 있습니다. 기기 보조 기능(예: 배리어프리 접근, 화면 판독 소프트웨어 등)으로 인해 이상이 발생할 수 있으므로 표준에 있는 표시 및 숨기기 기능을 사용하는 것이 좋습니다.
3. 지원되는 기본 방법우선,dialog 태그는 HTMLDialogElement의 예이며, div 태그와 동일한 수준의 태그입니다. 이 섹션에서는 기본 기능이 더 많다는 점만 다릅니다. 대화 상자에서 사용할 수 있는 기본 메서드가 무엇인지 살펴보겠습니다.
var 대화 상자 = document.getElementById(dialog);// 페이지에 id=dialog인 대화 상자 태그가 있다고 가정합니다. // 대화 상자를 닫습니다.close(); // 대화 상자를 toastdialog.show() 형식으로 표시합니다. / 모델에서 displayDialogdialog.showModal();//Dialog.close()가 호출될 때 전달되는 매개변수 값입니다.Dialog.returnVlaue;// 대화 상자의 표시 상태입니다.
먼저 예제로 이동하여 작동한 다음 어떤 기능이 있는지 확인한 후 다시 돌아와서 다음 요약을 비교할 수 있습니다.
1: close 메소드는 숨겨진 상태에서도 여러 번 호출할 수 있으며 다시 호출할 수 있습니다.
2: close는 문자열이어야 하고 returnVlaue로 표현되는 변수를 전달할 수 있습니다.
3: show 메소드는 숨겨진 상태에서도 문제 없이 여러 번 호출될 수 있습니다.
4: show 메소드는 토스트의 위치를 변경하지 않습니다. show 메소드가 호출된 후에도 팝업 상자는 여전히 원래 위치에 있습니다.
5: 표시 방법, 표시 위치는 뒤에 마스크 레이어 없이 중앙에 있는 이전 요소 바로 뒤에 있습니다. z-색인의 표시 모드는 z-색인을 설정하지 않은 상대 표시 모드와 유사합니다(이전에 showModal이 호출되지 않은 경우). ) ).
6: showModal이 호출된 경우 show 메소드 이후에 요소는 showModal이 표시한 위치에 표시되며 변경되지 않습니다(콘텐츠 높이가 많이 변경되더라도).
7: 두 개의 대화 상자 요소가 있는 경우 둘 다 show 메소드를 호출합니다. html 구조에서 후자의 대화 상자는 항상 이전 대화 상자를 덮습니다(어떤 대화 상자가 show 메소드를 먼저 호출하는지에 관계 없음).
8: 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. 지원되는 기본 이벤트대화 상자의 또 다른 장점은 클릭과 같은 기본 이벤트 외에도 대화 상자에 대한 두 가지 추가 특수 이벤트를 지원한다는 것입니다.
varDialog = document.getElementById(dialog); // 페이지에 id=dialog인 대화 상자 태그가 있다고 가정합니다. // 닫기 메서드가 호출될 때Dialog.onclose = function(){}; PC 측에서 키를 누를 때. 그런데 크롬 버전 이후에는 더 이상 작동하지 않는 것 같습니다. Dialog.oncancel = function(){};이제 예를 살펴보겠습니다. 대화 상자 이벤트 예시 표시.
또한 몇 가지 질문이 있습니다. 여기에 나열해 보겠습니다.
1: 대화 상자를 숨기기 위해Dialog.close()를 호출해야만 onclose 이벤트가 트리거될 수 있습니다.
2: 취소 이벤트가 발생한 후에도 닫기 이벤트가 계속 발생합니다. chrome64 버전 이후에는 esc 키로 취소가 발생하지 않습니다.
3: 대화 상자를 닫는 버튼이 여러 개 있는 경우 닫기 이벤트의 콜백에서 returnVlaue 값을 사용하여 닫기 이벤트를 트리거하는 데 사용되는 버튼을 결정합니다.
5. 기타대화 상자의 일부 기능은 이전에 설명되었습니다. 불완전하거나 부정확할 수 있으며, 시간이 지남에 따라 새로운 기능이 나타날 수도 있습니다.
이전 예제를 볼 때 스타일이 특히 보기 흉하다는 등의 몇 가지 단점도 확인했습니다. 이에 관해 CSS를 사용하여 의미나 다른 것에 영향을 주지 않고 스타일을 완전히 재설정할 수 있습니다. .
여기서는 대화의 성과에 대해서만 이야기하고 싶기 때문에 그렇게 하지 않겠습니다.
6. 요약결국 대화상자는 팝업 대화상자를 위한 의미론적 태그이며 몇 가지 고유한 장점(예: 웹뷰 수준의 높이)이 있지만 현재는 Chrome에서만 지원되지만 향후에도 여전히 매우 유망합니다. 이제는 다른 브라우저에서 직접 대화 상자 메커니즘을 구현해 보세요. (이미 이에 대한 구현 계획이 있으므로 여기서는 찾지 않겠습니다.)
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.