HTML5 대화상자란 무엇입니까? HTML5에서 대화 상자를 사용하여 팝업 창을 시뮬레이션하는 방법은 무엇입니까?
- 寻∝梦원래의
- 2018-08-15 17:41:234681검색
HTML5 대화상자란 무엇인가요? HTML5에서 대화 상자를 사용하여 팝업 창을 시뮬레이션하는 방법은 무엇입니까? 이 문서에서는 주로 HTML5에서 대화 상자 태그의 정의와 구체적인 사용법을 설명하고 HTML5에서 대화 상자 태그를 통해 팝업 창을 시뮬레이션하는 방법을 설명합니다.
HTML5 대화 상자 태그의 정의 및 사용법:
a38fd2622755924ad24c0fc5f0b4d412 태그는 대화와 같은 대화 상자를 정의합니다.
예는 다음과 같습니다.
<dialog> <dt>老师</dt> <dd>1+1 等于？</dd> <dt>学生</dt> <dd>2</dd> <dt>老师</dt> <dd>答对了！</dd> </dialog>
팁 및 참고 사항:
팁: 대화의 모든 문장은 73de882deff7a050a357292d0a1fca94 태그로 정의된 섹션에 속해야 합니다. 아래 예를 참조하세요.
태그 정의 및 사용 지침:
a38fd2622755924ad24c0fc5f0b4d412 태그는 대화 상자, 확인 상자 또는 창을 정의합니다.
예:
<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 라이브러리에 의존해 왔지만 이 문서에서는 이 효과를 얻기 위해 a38fd2622755924ad24c0fc5f0b4d412 요소를 사용할 것입니다.
대화 상자 요소 사용:
a38fd2622755924ad24c0fc5f0b4d412는 HTML5(정확하게는 5.1) 요소입니다. 이는 6c04bd5ca3fcae76e30b72ad730ca86d, b8a712a75cab9a5aded02f74998372b4 및 a5e9d42b316b6d06c62de0deffc36939 요소와 유사한 "슬라이스 루트"로 분류되며, 각각은 body의 하위 항목으로 처리할 수 있는 새로운 독립 콘텐츠 영역을 생성합니다. dc6dce4a544fdca2df29d5ac0ea9906b 또는 2f8332c8dcfd5c7dec030a070bf652c3과 같은 중첩된 요소는 아래와 같이 모두 유효합니다.
<body>
<div>
<dialog></dialog>
</div>
<section>
<dialog></dialog>
</section>
<dialog></dialog>
</body>기본적으로 지원되는 브라우저(Chrome 37+ 및 Opera 27+)는 a38fd2622755924ad24c0fc5f0b4d412 요소를 숨겨진 형식으로 렌더링합니다. 이는 JavaScript show() 또는 showModal() 메서드를 호출해야만 표시할 수 있습니다. () 메소드는 이를 다시 숨깁니다. 일반적으로 다음과 같이 클릭 이벤트에서 이 메서드를 실행합니다.
var $accountDelete = $('#delete-account'),
$accountDeleteDialog = $('#confirm-delete');
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
});
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
});사용자 정의 스타일:
대부분의 다른 요소와 마찬가지로 대화 상자도 브라우저의 기본 스타일을 쉽게 재정의할 수 있습니다. 따라서 스타일을 사용자 정의할 수 있습니다. 예를 들어 대화 상자 테두리를 더 얇게 만들고 모서리를 둥글게 만들고 그림자 효과를 추가하는 등의 작업을 수행합니다.
또한 a38fd2622755924ad24c0fc5f0b4d412 요소가 모달로 표시되면(ShowModal() 메서드 사용) 추가적인 의사 요소::backdrop을 추가합니다. ::backdrop 요소는 대화 상자 바로 아래에 위치하며 전체 뷰포트와 그 아래의 다른 요소를 덮습니다.
브라우저 지원:
현재 Chrome 및 Safari 6만 a38fd2622755924ad24c0fc5f0b4d412 태그를 지원합니다.
【관련 추천】
HTML IMG 태그의 속성은 무엇인가요? IMG 태그 사용법 이해
HTML5의 웹이란 무엇인가요? 웹스토리지의 구성요소는 무엇인가요?
위 내용은 HTML5 대화상자란 무엇입니까? HTML5에서 대화 상자를 사용하여 팝업 창을 시뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!