HTML5 및 CSS3를 사용하여 모달 상자 예제 만들기

이 글은 주로 HTML5와 CSS3를 사용하여 모달박스를 만드는 예제에 대한 관련 정보를 소개하고 있습니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

소스 코드 예제

아래의 긴 지침을 읽고 싶지 않고 소스 코드나 온라인 예제를 직접 보고 싶을 수도 있습니다. 아래 링크는 CSS3 전환, 불투명도, 포인터 이벤트 및 기타 속성을 사용하여 만든 기능적 모달 상자입니다.

클릭하면 Github로 이동하여 소스 코드를 볼 수 있습니다. ModalBox-Tutorial

HTML 구조

프런트 엔드 구성 요소는 비즈니스 및 상호 작용 시나리오에 따라 구동되며 모달 상자도 예외는 아닙니다. 버튼 클릭과 같은 특정 작업을 수행한 후 모달 상자를 표시하여 사용자에게 피드백을 제공하거나 사용자에게 다음 상호 작용을 수행하도록 안내하는 것입니다. 모달 상자의 상호 작용에는 5단계가 포함될 수 있습니다.

1. 버튼이나 링크가 있고 사용자가 이를 클릭하면 모달 상자가 표시됩니다. 현재 뷰포트 전체를 덮는 투명 마스크 오버레이

3. 모달 상자의 내용은 뷰포트의 특정 위치(보통 중간)에 불투명한 색상(보통 흰색)으로 나타납니다. 모달 상자의 내용(일반적으로 오른쪽 상단에 있음)에는 "닫기" 기호가 있으며, 이를 클릭하면 모달 상자가 숨겨집니다.

5 모달 상자의 내용은 실제 비즈니스 시나리오에 따라 지정되어야 합니다. , 따라서 어떤 구조라도 될 수 있습니다.

Style

1. .modalbox는 투명 마스크 레이어입니다.

2. 클릭 후. 모달 상자 링크 표시

4. .modalbox-close-btn을 클릭하면 .modalbox가 숨겨집니다.

효과 예

저장을 클릭하면 BootStrap 모달 상자가 자동으로 닫힙니다. 코드 공유

bootstrap 모달 상자 중첩, tabindex 속성, 그림자 제거 방법

Angular에서 모달 상자를 팝업하는 두 가지 방법

위 내용은 HTML5 및 CSS3를 사용하여 모달 상자 예제 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!