모달 창은 웹마스터의 무기고에서 자주 사용되는 도구입니다. 등록 양식, 광고 블록, 메시지 표시 등과 같은 많은 작업을 해결하는 데 매우 적합합니다.

그러나 프로젝트의 정보 지원에서 중요한 위치에도 불구하고 모달은 일반적으로 JavaScript로 구현되므로 기능을 확장하거나 이전 버전과의 호환성을 보장할 때 문제가 발생할 수 있습니다.

HTML5와 CSS3를 사용하면 모달을 매우 쉽게 만들 수 있습니다.

HTML 마크업

모달 창을 만드는 첫 번째 단계는 간단하고 효과적인 마크업입니다.

모달 창 열기

div 요소 내부 모달 창의 내용이 배치됩니다. 또한 창을 닫으려면 링크를 구성해야 합니다. 예를 들어 간단한 제목과 몇 개의 단락을 배치해 보겠습니다. 이 예제의 전체 마크업은 다음과 같습니다.

모달 창 열기

스타일

수업 만들기 모달 다이얼로그그리고 건설 시작 모습:

ModalDialog( 위치: 고정; 글꼴 패밀리: Arial, Helvetica, sans-serif; 위쪽: 0; 오른쪽: 0; 아래쪽: 0; 왼쪽: 0; 배경: rgba(0,0,0,0.8); z-index : 99999, -webkit-transition: 불투명도 400ms 천천히 시작, -moz-transition: 불투명도 400ms 천천히 시작, 전환: 불투명도 400ms 천천히 시작, 디스플레이: 없음, 포인터 이벤트: 없음, )

창의 위치는 고정되어 있습니다. 즉, 페이지를 스크롤할 때 아래로 이동합니다. 열린 창. 또한 검은색 배경이 확장되어 화면을 채울 것입니다.

배경은 약간의 투명도를 가지며 속성을 사용하여 다른 모든 요소 위에 배치됩니다. Z-인덱스.

마지막으로 모달 창을 표시하고 비활성 상태에서 숨기도록 전환을 설정합니다.

속성을 모르실 수도 있습니다. 포인터 이벤트, 그러나 요소가 마우스 클릭에 반응하는 방식을 제어할 수 있습니다. 우리는 값을 클래스의 값으로 설정합니다. 모달 다이얼로그, 의사 클래스가 활성 상태일 때 링크가 마우스 클릭에 응답하지 않아야 하기 때문에 ":표적".

이제 의사 클래스를 추가하십시오. :표적및 모달 창의 스타일.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( 너비: 400px; 위치: 상대; 여백: 10% 자동; 패딩: 5px 20px 13px 20px; 테두리 반경: 10px; 배경: # fff; 배경: -moz-linear-gradient(#fff, #999); 배경: -webkit-linear-gradient(#fff, #999); 배경: -o-linear-gradient(#fff, #999); )

의사 클래스 표적요소의 표시 모드를 변경하므로 링크를 클릭하면 모달 창이 표시됩니다. 우리는 또한 재산의 가치를 변경합니다 포인터 이벤트.

모달의 너비와 페이지의 위치를 ​​정의합니다. 또한 배경과 둥근 모서리에 대한 그라디언트를 정의합니다.

창을 닫습니다

이제 창을 닫는 기능을 구현해야 합니다. 우리는 버튼의 모양을 형성합니다:

닫기 ( background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font- 무게: 굵게, -webkit-border-radius: 12px, -moz-border-radius: 12px, border-radius: 12px, -moz-box-shadow: 1px 1px 3px #000, -webkit-box-shadow: 1px 1px 3px #000; 상자 그림자: 1px 1px 3px #000; ) .close:hover( 배경: #00d9ff; )

버튼의 경우 텍스트의 배경과 위치를 설정합니다. 그런 다음 버튼을 배치하고 둥근 테두리 속성을 사용하여 둥글게 만들고 밝은 그림자를 만듭니다. 버튼 위에 마우스 커서를 올리면 배경색이 변경됩니다.

모달, 오버레이, 대화 상자, 무엇이라고 부르든 이제 이 UI 패턴을 재고할 때입니다. 처음 등장했을 때 모달은 사용자 인터페이스 문제에 대한 우아한 솔루션이었습니다. 첫째, 사용자 인터페이스를 단순화합니다. 둘째, 화면 공간을 절약합니다. 그 이후로 디자이너들은 모달을 기민하게 수용했으며 일부는 극한까지 끌어왔습니다. 모달은 두려운 팝업의 오늘날 버전이 되었습니다. 사용자는 모달을 성가시게 여기고 본능적으로 자동으로 닫는 법을 배웠습니다.

정의:

모달 창은 기본 응용 프로그램 창 위에 있는 요소입니다. 기본 창을 차단하지만 자식 모달 창 뒤에 보이는 상태로 둡니다. 사용자는 상위 애플리케이션으로 돌아가기 전에 모달과 상호 작용해야 합니다. — 위키피디아

용법

다음이 필요할 때 모달을 사용할 수 있습니다.

사용자의 시선을 사로잡다

사용자의 현재 작업을 중단하여 더 중요한 것에 주의를 집중시키려는 경우에 사용합니다.

사용자 입력 필요

사용자로부터 정보를 얻고 싶을 때 사용합니다. 예를 들어 등록 및 승인 양식입니다.

컨텍스트에서 추가 정보 표시

표시하고 싶을 때 사용 추가 정보상위 페이지의 컨텍스트를 잃지 않고 예를 들어, 더 큰 이미지 또는 비디오를 표시합니다.

추가 정보 표시(상황에 맞지 않음)

상위 페이지 또는 다른 페이지와 "독립적인" 다른 매개변수와 직접 관련이 없는 정보를 표시하려는 경우에 사용합니다. 예를 들어 알림.

참고: 모달을 사용하여 오류, 작업 성공 또는 경고 메시지를 표시하지 마십시오. 페이지에 남겨주세요.

모달 창의 해부학

잘못 구현된 오버레이는 작업을 방해할 수 있습니다. 모달 창이 사용자를 방해하지 않도록 하려면 다음 사항에 유의하세요.

1. 탈출구

사용자에게 모달을 닫을 수 있는 방법을 제공하여 탈출할 수 있는 방법을 제공합니다. 이는 다음과 같은 방법으로 달성할 수 있습니다.

• 취소 버튼
• 닫기 버튼
• 이스케이프 키
• 창밖을 클릭

접근성 팁: 각 모달 창에는 해당 창을 닫을 수 있는 접근 가능한 키보드 컨트롤이 있어야 합니다. 예를 들어, 이스케이프 키는 창을 닫아야 합니다.

2. 제목

모달 제목으로 사용자 컨텍스트를 제공합니다. 이를 통해 사용자는 떠나지 않았기 때문에 자신이 어디에 있는지 알 수 있습니다. 원본 페이지.

팁: 버튼 레이블(모달을 시작함)과 모달 제목은 일치해야 합니다.

3. 버튼

버튼 레이블에는 의미 있는 이름이 포함되어야 합니다. 이것은 모든 버튼에 적용됩니다. 모달 창의 경우 '닫기' 버튼은 '닫기' 버튼 아이콘 또는 'x'로 표시되어야 합니다.

참고: 버튼 아이콘을 혼동하지 마십시오. 사용자가 작업을 취소하려고 할 때 ANOTHER 취소 버튼이 있는 모달 창이 팝업되면 혼란이 발생합니다. "취소 취소해? 아니면 계속할까요?

4. 크기 조정 및 위치 지정

모달은 너무 크거나 작아서는 안 됩니다. 적절한 크기를 원하면 됩니다. 목표는 컨텍스트를 유지하는 것이므로 모달이 전체 화면을 차지하지 않아야 합니다. 내용은 모델 창과 일치해야 합니다. 스크롤바가 필요한 경우 새 페이지를 만들 수 있습니다.

• 위치— 화면 상단에 있습니다. 모바일 보기에서는 모달이 그 아래에 놓이면 손실될 수 있기 때문입니다.
• 크기— 모델 창 화면의 50% 이상을 사용하지 마십시오.

5. 초점

모달을 열 때 라이트박스 효과(배경 흐리게)를 사용합니다. 이것은 모달에 주의를 끌고 사용자가 상위 페이지와 상호 작용할 수 없음을 나타냅니다.

접근성 팁: 키보드 포커스를 모달 창으로 설정하십시오.

6. 사용자가 모달 창을 시작합니다.

팝업 모달로 사용자를 놀라게 하지 마십시오. 버튼 클릭, 링크 따라가기 또는 옵션 선택과 같은 사용자의 작업이 모달 창을 트리거하도록 합니다. 자동 여는 모달은 사용자를 놀라게 하고 빠르게 닫을 수 있습니다.

모바일 장치의 모달 창

모달과 모바일 장치는 함께 잘 작동하지 않는 경향이 있습니다. 모달이 너무 크거나, 화면 공간을 너무 많이 차지하거나, 너무 작아 콘텐츠 탐색이 어렵습니다. 장치 키보드 및 중첩 스크롤바와 같은 요소를 추가합니다. 사용자는 모달 창의 필드를 잡으려고 손가락을 움직이고 확대/축소할 수만 있습니다. 모달 창에 대한 더 나은 대안이 있으므로 사용해서는 안됩니다. 모바일 기기.

유효성

건반

모달 창을 만들 때 접근 가능한 키보드 컨트롤을 추가하는 것을 잊지 마십시오. 다음을 고려하세요:

모달 창 열기— 대화 상자를 호출하는 요소는 키보드에서 액세스할 수 있어야 합니다.

대화 상자로 포커스 이동새창—   모달 창이 열리면 키보드 포커스를 처음으로 이동해야 합니다.

키보드 포커스 컨트롤  —   포커스가 대화 상자로 이동되면 대화 상자가 닫힐 때까지 대화 상자 안에 "잠겨 있어야" 합니다.

대화 상자 닫기  —   각 모달 창에는 해당 창을 닫을 수 있는 키보드 컨트롤이 있어야 합니다.

아리아

활성 인터넷 응용 프로그램의 가용성에 대한 표준(액세스 가능한 리치 인터넷 응용 프로그램 (아리아) 웹 콘텐츠 및 웹 애플리케이션의 접근성을 개선하는 방법을 정의합니다.

다음 ARIA 태그는 액세스 가능한 모달을 만드는 데 도움이 될 수 있습니다. 역할 = “ 대화” , 아리아- 숨겨진, 아리아- 상표

또한 시력이 좋지 않은 사용자를 주의하십시오. 그들은 사용할 수 있습니다 화면 돋보기모니터에서 화면 콘텐츠를 확대합니다. 확대 후 사용자는 화면의 일부만 볼 수 있습니다. 이 경우 모달 창은 모바일 장치와 동일한 방식으로 표시됩니다.

결론

사람들이 자동으로 모달을 닫는 방법을 배웠다면 왜 모달을 사용하고 싶습니까?

사용자의 주의를 끌고 컨텍스트를 유지하며 사용자 인터페이스를 단순화하는 것은 모달 창의 큰 이점입니다. 그러나 사용자 경험을 방해하고 모달 창 뒤에 콘텐츠를 숨겨 상위 페이지와 상호 작용할 수 없다는 단점도 있습니다. 모달 창이 항상 정답은 아닐 수 있습니다. 선택할 때 다음을 고려하십시오.

제어 목록

• 언제 모달을 표시합니까?
• 모달 창을 어떻게 표시합니까?
• 모달 창의 모양?
• 우리는 어떤 정보를 제공하고 수집합니까?

모달에 대한 대체 UI 구성요소가 있습니다. 비모달 또는 알림 알림(Material Design에서 Microsoft 및 Google에서 사용하는 용어)이라고 합니다. 자세한 내용은 다음 게시물을 읽어보세요.

팝업 창을 사용하여 중요한 메시지를 표시하거나 사이트에서 변경된 사항만 표시할 수 있습니다. 팝업 창에는 일반 및 모달의 두 가지 유형이 있습니다.

참고: 모달 창은 모달 창이 열려 있는 동안 사용자가 모달 창이 닫힐 때까지 사이트의 다른 요소와 상호 작용할 수 없다는 점에서 일반 창과 다릅니다.

다음을 사용하여 모달 창의 예를 볼 수 있습니다. 자바스크립트, alert() 메서드를 사용합니다.

팝업창

팝업을 만드는 첫 번째 단계는 요소를 만드는 것입니다.