HTML5 기본 대화 상자 요소를 사용하고 모달 구성 요소를 쉽게 생성

HTML 5.2 초안에는 새로운 대화 상자 요소가 추가되었습니다. 그러나 그것은 실험적인 기술이다.

이전에는 어떤 종류의 모달 대화 상자나 대화 상자를 만들려면 배경, 닫기 버튼, 대화 상자의 이벤트 바인딩, 마크업 정렬, 메시지를 전달할 방법을 찾아야 했습니다. 얘기를 하자면...정말 복잡해요. 대화 상자 요소는 위의 모든 문제를 해결합니다.

다음은 부트스트랩 모달 상자의 html 구조입니다.

 <!-- 버튼이 모달 상자를 트리거합니다--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> 모달 상자 시연 시작</button><!-- 모달 상자(모달 ) --><div 클래스=모달 페이드 id=myModal tabindex=-1 역할=대화상자 aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> &times> <h4 클래스 =modal-title id=myModalLabel> 모달 제목</h4> </div> <div class=modal-body> 여기에 텍스트 추가</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>닫기</button> <button type=button class=btn btn-primary> 변경 사항 제출</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

다음은 기본 모달 상자의 HTML 구조입니다.

 <!-- 버튼이 모달 상자를 트리거합니다--><button type=button class=btn>모달 상자 표시</button><!-- 모달 상자--><대화 상자 열기> HTML5 기본 모달 상자</ 대화 상자>

우리는 대화 상자 요소의 가장 간단한 마크업을 살펴봤고 위 대화 상자에서 open이 속성이라는 것을 눈치챘을 것입니다. 이 속성을 요소에 추가하면 대화 상자가 강제로 표시되고, 그렇지 않으면 제거됩니다. 또한 대화 상자는 페이지의 절대 위치에 배치됩니다.

위 그림은 기본적인 모달박스 스타일을 보여줍니다.

브라우저를 열면 기본 스타일이 다음과 같은 것을 볼 수 있습니다.

 대화 상자: 블록; 위치: 절대; 왼쪽: 0px; 너비: -webkit-fit-content; 색상: 검정; 테두리 스타일: 단색; 테두리 색상: 초기; 테두리 이미지: 초기; 배경: 흰색;

또한 대화 상자 요소에는 새로운 가상 클래스 선택기::backdrop이 도입되었습니다. 브라우저를 통해 표시되는 기본 ::backdrop 스타일은 다음과 같습니다.

 대화상자::배경 { 위치: 고정; 오른쪽: 0px; 왼쪽: 0px;

HTML 요소처럼 대화 상자 요소의 스타일을 지정할 수 있으며 거의 ​​모든 CSS 스타일이 가능합니다. ::backdrop 의사 클래스 선택기를 통해 배경 스타일을 설정하는 데 사용할 수 있습니다.

예를 들어:

 대화상자{ 여백:250px; 높이:250px; 선 높이:250px; 테두리: 없음; 상자 그림자: :backdrop { 배경: rgba(검정색, .5);}

위의 스타일 효과는 다음과 같습니다.

아래는 open 속성이 설정되지 않아 시각적으로 아무것도 표시되지 않는 기본 대화상자입니다. 표시하거나 숨기려면 JavaScript API를 사용해야 합니다.

 <dialog>대화상자입니다! </dialog>

대화 상자 요소의 .show() 및 .close() API는 각각 대화 상자를 표시하고 닫는 API입니다. DOM 요소에서 이 두 API를 사용하면 대화 상자를 표시하고 닫을 수 있습니다.

예를 들어:

 <!-- HTML --><dialog> <p>이것은 대화 상자입니다! </p> <button id=close>대화 상자 닫기</button></dialog><button id=show>대화 상자 표시</button> <!-- script --> <script> var 대화 상자 = 문서. querySelector(dialog); document.querySelector(#show).onclick = function(){Dialog.show().onclick = function(){dialog.close(); };</script>

대화상자.close()에 매개변수를 전달할 수 있습니다. 대화 상자 요소의 닫기 이벤트를 수신하면 대화 상자.returnValue 속성이 지정된 값을 반환합니다.

좋다:

 <!--HTML--><대화 상자> <p>이것은 대화 상자입니다! </p> <p><input type=text id=return_value value= placeholder=내용을 입력하세요/></p> <button id=close>대화상자 닫기</button></dialog><button id=show >대화상자 표시</button><!--script--><script> varDialog = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ Dialog.showModal(); }; document.querySelector(#close).onclick = function(){ var val = document.querySelector(#return_value).value;Dialog.close(val) }; 요소 닫기 이벤트 대화 상자.addEventListener(close, function(){ 경고(this.returnValue); });</script>

대화 상자를 표시하는 또 다른 API는 .showModal()입니다.

사용자가 대화 상자 이외의 페이지 요소 개체와 상호 작용하는 것을 원하지 않으면 .show()를 사용하는 대신 .showModal()을 사용하여 대화 상자를 엽니다. .showModal()을 사용하여 열린 대화 상자에는 전체 창 반투명 배경 레이어가 있어 사용자가 대화 상자 외부의 페이지 요소 개체와 상호 작용하는 것을 차단합니다. 동시에 대화 상자는 창 중앙에 표시됩니다. 기본적으로 (위, 아래, 왼쪽, 오른쪽 가운데 정렬) .show()로 열린 대화 상자는 기본적으로 창 상단에 표시됩니다(CSS를 통해 가운데 정렬 가능).

대화 상자를 닫은 후 close는 이벤트를 트리거합니다. 또한 사용자는 Esc 키를 입력하여 모달 대화 상자를 닫을 수 있습니다. 그러면 event.preventDefault()를 사용하여 취소할 수 있는 취소 이벤트가 발생합니다.

form[method=dialog]를 사용하여 양식을 <dialog> 요소와 통합할 수 있습니다. 양식이 제출된 후 대화 상자를 닫고 사용된 제출 버튼의 값으로Dialog.returnValue를 설정합니다.

또한 자동 초점 속성을 사용하면 대화 상자가 팝업될 때 대화 상자 내의 양식 컨트롤에 자동으로 초점을 맞출 수 있습니다.

예를 들어:

 <!--HTML--><dialog id =dialog> <form method =dialog> <p>이용약관에 동의하십니까? </p> <p><textarea class =form-control 비활성화>약관 및 요구 사항...</textarea></p> <버튼 유형 =값 제출 =예>예</button> <버튼 유형 =값 제출 = 자동 초점 없음>아니요</button> </form></dialog><button id=show>양식 대화 상자 표시</button><!--script--><script> var 대화 상자 = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){Dialog.showModal(); }; //대화상자 요소의 닫기 이벤트를 수신합니다.Dialog.addEventListener(close, function(e){ if(this.returnValue = == 예 ){ 경고(this.returnValue) //뭔가를 수행합니다... }else{ 경고(this.returnValue) //뭔가를 수행합니다... });</script>

데스크톱 브라우저 중에서는 Google Chrome만이 대화 상자의 전체 기능을 지원합니다(이 블로그 게시물 현재). 브라우저 간 호환성을 얻으려면 대화 상자 폴리필을 사용하세요.

<iframe src=//caniuse.com/dialog/embed scrolling=noallowtransparency=trueallowfullscreen=trueframeborder=0></iframe>

참고 문서: 대화 상자 요소 데모

보통js 함수 라이브러리: https://github.com/JofunLiang/usuallyjs

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.