대화 상자(모달 상자 및 플로팅 레이어라고도 함)는 웹 프로젝트에서 사용자 상호 작용의 중요한 부분입니다. 가장 일반적으로 사용하는 것은 js에서 경고() 및 확인()입니다. 스타일을 맞춤 설정할 수 있으므로 개발 과정에서 일반적으로 자체 요구 사항에 따라 휠을 제작하거나 타사 휠을 사용합니다.
대화 상자의 구성팝업 상자의 일반적인 형태:
위치: 화면 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래, 세로 중앙 등.
크기: 고정 너비 및 고정 높이, 고정 너비 및 고정 높이, 가변 너비 및 고정 높이 등
개발 중인 대화상자 형태는 위치와 크기를 임의로 조합한 경우입니다.
그러나 구현하기 쉽지 않은 상황(가변 너비 및 높이의 수직 센터링)이 있습니다(이를 구현하려면 display:table 또는 CSS3의 번역 또는 flex를 사용할 수 있음). 자세한 내용은 수평 및 수직 센터링 레이아웃을 참조하세요. .
위의 대화 상자에는 콘텐츠에 대한 컨테이너가 포함되어 있으며, 대화 상자 아래에도 마스크 레이어(마스크)가 있습니다. 마스크 레이어는 사용자가 팝업 상자를 트리거한 후 형성된 대화 상자와 페이지 본문 사이의 분리 레이어입니다. .그것의 존재는 사용자에게 보다 분명한 시각적 차이 효과를 제공하는 동시에 사용자가 대화 상자를 트리거한 후 다른 불필요한 페이지 기본 작업을 방지하여 더 나은 사용자 경험을 제공할 수 있습니다.
문제가 있습니다선택할 수 있는 대화 휠이 많지만 다양한 문제에 직면합니다.
그렇다면 대화 상자를 만드는 간단한 방법이 있습니까? 물론 HTML5 대화 상자 요소를 사용할 수 있습니다.
HTML5(대화상자)
<대화 상자 열기> <h2>안녕하세요.</h2></dialog>
위의 코드를 사용하여 'Hello world'라는 내용이 표시된 대화 상자를 만들 수 있습니다.
대화 상자의 표시/숨기기를 제어하는 것도 쉽습니다. 표시하려면 open 속성을 추가하고 숨기려면 제거하세요. 물론 DOM 인터페이스(show(), close())를 통해 대화 상자의 표시 및 숨기기를 제어할 수도 있습니다.
대화 상자 아래 마스크 레이어의 경우 ::backgrop 의사 요소를 사용할 수 있으며 이를 활성화하려면 showModal() DOM API를 사용해야 합니다. ::backgrop의 특징은 해당 위치가 대화 상자 아래에 있다는 것입니다. , 위의 z 인덱스에서.
showModal()을 사용하면 마스크 레이어뿐만 아니라 대화 상자 컨테이너도 표시할 수 있으므로 ::backdrop을 사용할 때 키보드에서 ESC 키를 누르면 show() API 대신 showModal()을 사용할 수 있습니다. 팝업 레이어는 닫힙니다. 물론 close() DOM API를 사용할 수 있습니다.
::backdrop 레이어를 반투명 레이어로 설정할 수 있으며 코드는 다음과 같습니다.
대화상자::배경 { 배경색: rgba(0, 0, 0, 0.75);}프롬프트 정보가 포함된 일반적인 팝업 레이어 외에도 더 일반적으로 사용되는 양식이 포함된 팝업 레이어도 있습니다.
양식이 포함된 팝업 레이어이러한 팝업 레이어를 만들기 위해 HTML5 대화 상자 요소를 양식 요소와 결합하여 사용할 수 있습니까?
답변:예
양식 요소와 대화 상자 요소를 어떻게 밀접하게 결합할 수 있나요?
답변: 대화 상자 요소에 method=dialog 속성만 추가하면 버튼 요소의 속성 값이 대화 상자 요소에 전달될 수 있습니다.
<dialog> <form method=dialog> <p>확인 또는 취소</p> <button type=submit value=yes>확인</button> <button type=submit value=no>취소</button> </form ></dialog><script> var 대화 상자 = document.querySelector('dialog') 대화 상자.showModal() 대화 상자.addEventListener('닫기', function(event) { console.log(dialog.returnValue) })</script>데모
브라우저 호환성비교적 사용하기 쉬운 HTML5이지만 여전히 호환성 문제가 있으며, Chrome과 Opera에서는 이를 더 잘 지원하지만, IE, Edge, Safari에서는 잘 지원하지 않습니다. Android도 이를 지원하므로 충분하지 않으며 Android 6 이상에서만 지원됩니다. 자세한 내용은 caniuse를 참조하세요.
그렇다면 이전 버전의 브라우저는 HTML5 대화 상자를 지원할 수 있습니까? 우선 우리가 생각하는 것은 es6의 새로운 기능을 지원하는 babel-polyfill처럼 대화 상자를 지원하는 폴리필이 있는지 여부입니다. 실제로 다양한 버전의 vue와 a11y-dialog를 제공하는 오픈 소스 프로젝트가 있습니다. 각각 반응한다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.