지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

HTML5 대화상자란 무엇입니까? HTML5에서 대화 상자를 사용하여 팝업 창을 시뮬레이션하는 방법은 무엇입니까?

寻∝梦
풀어 주다： 2018-08-15 17:41:23
원래의
4712명이 탐색했습니다.

HTML5 대화상자란 무엇인가요? HTML5에서 대화 상자를 사용하여 팝업 창을 시뮬레이션하는 방법은 무엇입니까? 이 문서에서는 주로 HTML5에서 대화 상자 태그의 정의와 구체적인 사용법을 설명하고 HTML5에서 대화 상자 태그를 통해 팝업 창을 시뮬레이션하는 방법을 설명합니다.

HTML5 대화 상자 태그의 정의 및 사용법:

태그는 대화와 같은 대화 상자를 정의합니다.

예는 다음과 같습니다. 

<dialog>
  <dt>老师</dt>
  <dd>1+1 等于？</dd>
  <dt>学生</dt>
  <dd>2</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>
로그인 후 복사

팁 및 참고 사항:

팁: 대화의 모든 문장은

태그로 정의된 섹션에 속해야 합니다. 아래 예를 참조하세요.

태그 정의 및 사용 지침:

태그는 대화 상자, 확인 상자 또는 창을 정의합니다.

예: 

<table border="1">
<tr>
  <th>January <dialog open>This is an open dialog window</dialog></th>
  <th>February</th>
  <th>March</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>
로그인 후 복사

HTML5 대화 상자 태그 속성:

open: open은 대화 상자 요소가 유효하고 사용자가 상호 작용할 수 있음을 지정합니다.

최근 웹상의 많은 프로세스는 완료되기 전에 사용자의 완전한 동의를 요구합니다. 예를 들어 사용자는 계정을 삭제하거나, 사용자 이름을 변경하거나, 금전 거래를 확인해야 할 수 있습니다.

이 경우 일반적인 사용자 경험(UX, 사용자 경험 디자인)은 두 개의 버튼이 있는 대화 상자를 표시하는 것입니다. 하나는 취소하는 것이고, 다른 하나는 계속하는 것입니다. 수년 동안 우리는 이 효과를 얻기 위해 JavaScript 라이브러리에 의존해 왔지만 이 문서에서는 이 효과를 얻기 위해

요소를 사용할 것입니다.

대화 상자 요소 사용:

는 HTML5(정확하게는 5.1) 요소입니다. 이는 ,
및
요소와 유사한 "슬라이스 루트"로 분류되며, 각각은 body의 하위 항목으로 처리할 수 있는 새로운 독립 콘텐츠 영역을 생성합니다.
또는
과 같은 중첩된 요소는 아래와 같이 모두 유효합니다. 

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>
로그인 후 복사

기본적으로 지원되는 브라우저(Chrome 37+ 및 Opera 27+)는

요소를 숨겨진 형식으로 렌더링합니다. 이는 JavaScript show() 또는 showModal() 메서드를 호출해야만 표시할 수 있습니다. () 메소드는 이를 다시 숨깁니다. 일반적으로 다음과 같이 클릭 이벤트에서 이 메서드를 실행합니다. 

var $accountDelete = $(&#39;#delete-account&#39;), 
      $accountDeleteDialog = $(&#39;#confirm-delete&#39;); 
  $accountDelete.on(&#39;click&#39;, function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $(&#39;#cancel&#39;).on(&#39;click&#39;, function() {
      $accountDeleteDialog[0].close(); 
  });
로그인 후 복사

사용자 정의 스타일:

대부분의 다른 요소와 마찬가지로 대화 상자도 브라우저의 기본 스타일을 쉽게 재정의할 수 있습니다. 따라서 스타일을 사용자 정의할 수 있습니다. 예를 들어 대화 상자 테두리를 더 얇게 만들고 모서리를 둥글게 만들고 그림자 효과를 추가하는 등의 작업을 수행합니다.

또한

요소가 모달로 표시되면(ShowModal() 메서드 사용) 추가적인 의사 요소::backdrop을 추가합니다. ::backdrop 요소는 대화 상자 바로 아래에 위치하며 전체 뷰포트와 그 아래의 다른 요소를 덮습니다.

브라우저 지원:

현재 Chrome 및 Safari 6만

태그를 지원합니다.

【관련 추천】

HTML IMG 태그의 속성은 무엇인가요? IMG 태그 사용법 이해

HTML5의 웹이란 무엇인가요? 웹스토리지의 구성요소는 무엇인가요?

위 내용은 HTML5 대화상자란 무엇입니까? HTML5에서 대화 상자를 사용하여 팝업 창을 시뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
HTML5 dialog的用法 HTML5 dialog实现模拟弹窗
원천：php.cn
이전 기사：HTML5에서 side 태그를 어떻게 사용하나요? HTML5aside 사이드바를 사용하는 방법을 알고 있나요? 다음 기사：HTML5의 헤더 태그는 무엇을 의미하나요? HTML5에서 헤더 태그를 사용하는 방법을 알고 있나요?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
그리드를 사용하여 특정 디자인 만들기: 단계별 가이드 이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 그렇게 할 수 없습니다. <ulclass="container"...
에서 2024-04-06 20:29:08
0
2
492
3단계 계층구조의 맞춤 분류를 사용하여 우커머스 관련 상품을 선택하세요. 나는 "스포츠"라는 사용자 정의 분류를 가진 wooCommerce 상점을 가지고 있습니다. 분류에는 부모, 어린이, 어린이의 세 가지 수준이 있...
에서 2024-04-06 20:05:30
0
1
544
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿