JavaScript 없이 완전한 기능을 갖춘 모달 빌드

12170 단어 htmlcssa11ywebdev
modal(대화 상자라고도 함)을 생성하려면 JavaScript를 사용해야 한다는 일반적인 오해가 있습니다.

이 게시물에서는 JavaScript가 없는 모달을 빌드합니다.

세부 정보 태그 사용



HTML에는 모든 종류의 강력한 드롭다운 및 토글 메뉴를 만드는 데 사용할 수 있는 details tag 가 있습니다.

details 태그와 summary 태그(Details 태그에 필요한 대응물)를 사용하는 간단한 HTML 파일을 만들어 보겠습니다.

내 이름을 index.html로 저장하고 있습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript-Free Modal</title>
        <link rel="stylesheet" href="modal.css" type="text/css">
    </head>
    <body>
        <details class="modal">
            <summary class="modal__toggle"></summary>
            <div class="modal__background">
                <div class="modal__body" tabindex="-1" role="dialog" aria-labelledby="modal__label" aria-live="assertive" aria-modal="true">
                    <p id="modal__label">The modal is open! 🎉</p>
                </div>
            </div>
        </details>
    </body>
</html>


내가 추가한 속성 중 일부는 모달이 액세스 가능하고 WCAG를 준수하도록 하는 데 중요합니다.

예상대로 모달에 스타일을 추가하지 않았기 때문에 모달이 아직 제대로 작동하지 않습니다.

모달 스타일링



내가 제공한 스니펫은 tabindex 라는 동일한 디렉토리에 있는 CSS 파일을 참조합니다.

해당 파일이 어떻게 생겼는지 살펴보겠습니다.

먼저 토글 버튼의 ​​스타일을 지정합니다. 다음 코드는 role 속성을 사용하여 모달이 열릴 때 모달 위에 모달을 토글하는 aria-labelledby 태그를 배치합니다.

@charset "UTF-8";
.modal[open] .modal__toggle {
    left: calc(50vw + 140px);
    top: calc(15vh + 20px);
    position: fixed;
    z-index: 2;
}
.modal[open] .modal__toggle:focus {
    outline: 2px solid #00f;
}


그런 다음 모달이 열려 있는지 여부에 따라 aria-live 태그 내의 텍스트를 동적으로 수정할 수 있습니다.

.modal__toggle::before {
    content: 'Open Modal';
}
.modal[open] .modal__toggle::before {
    content: '✖';
}


브라우저가 aria-modal 태그 왼쪽에 추가하는 기본 화살표를 제거할 수도 있습니다.

.modal__toggle {
    color: #00f;
    list-style: none;
}
.modal__toggle::-webkit-details-marker {
    display: none;
}


마지막으로 토글 버튼의 ​​호버 상태를 개선할 수 있습니다.

.modal__toggle:hover {
    cursor: pointer;
    opacity: .8;
}


다음으로 모달 배경의 스타일을 지정합니다.

.modal__background {
    background-color:rgba(0, 0, 0, .25);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    opacity: .8;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1;
}


이 배경은 페이지의 나머지 부분을 흐리게 하여 사용자의 주의를 모달에 집중시킵니다.

마지막으로 모달 본문의 스타일을 지정합니다.

.modal__body {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 40px 20px;
    position: fixed;
    text-align: center;
    top: 15vh;
    width: 300px;
    z-index: 1;
}


그게 다야! JavaScript 없이 작동하는 모달이 있습니다.

그것을 시험해보고 싶다면 여기 demo가 있습니다.

JavaScript 없이 접근 가능한 모달



모달에 약간의 문제가 있습니다.

JavaScript를 사용하지 않기 때문에 사용자가 ESC를 눌러 모달을 종료하려고 시도했는지 여부를 수신할 수 없습니다.

그렇지 않으면 우리의 모달은 액세스 가능한 것으로 간주되며 이 특정 기능은 WCAG-compliant modal 에 대한 요구 사항이 아닙니다.

JavaScript를 완전히 피할 필요가 없다면 ESC 키 누름을 수신 대기하는 간단한 스크립트를 강력히 권장합니다.

document.addEventListener(`keydown`, (e) => {
    if (e.keyCode === 27) {
        document.querySelectorAll(`.modal`).forEach((modal) => {
            modal.open = false;
        });
    }
});


결론



특히 JavaScript가 필요하지 않은 많은 CSS 프레임워크가 모달용으로만 태그를 사용한다는 점을 고려하면 사양에서 특히 모달에 대해 널리 채택된 태그를 보는 것이 멋질 것이라고 생각합니다.

dialog tag은 이것에 대한 시도이지만 it still lacks support in several major browsers .

어쨌든 이것은 우리가 modal.css 및 [open]에 사용할 수 있는 수많은 작은 트릭 중 하나일 뿐입니다.

full code은 내 GitHub 계정의 리포지토리로 사용할 수 있습니다.
Apache HTTPD를 사용한 인증
함수형 프로그래밍에 대한 아주 간단한 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage