이 기사에서는 HTML5 및 CSS3를 사용하여 모달 상자를 만들고 모든 사람과 공유하는 예를 소개합니다.
소스코드 예시어쩌면 아래의 긴 지침을 읽고 싶지 않고 소스 코드나 온라인 예제를 직접 보고 싶을 수도 있습니다. 아래 링크는 CSS3 전환, 불투명도, 포인터 이벤트 및 기타 속성을 사용하여 만든 기능적 모달 상자입니다.
이를 클릭하면 Github로 이동하여 소스 코드를 볼 수 있습니다: ModalBox-Tutorial
HTML 구조프런트 엔드 구성 요소는 비즈니스 및 상호 작용 시나리오에 의해 구동되며 모달 상자도 예외는 아닙니다. 일반적인 시나리오는 버튼 클릭과 같은 작업을 수행한 다음 모달 상자를 표시하여 사용자에게 피드백을 제공하거나 사용자를 안내하는 것입니다. 인터페이스를 수행합니다. 모달 상자의 상호 작용에는 5단계가 포함될 수 있습니다.
1. 모달 상자 표시를 실행하기 위해 사용자가 클릭하는 버튼이나 링크가 있습니다.
2. 모달 상자가 표시되면 현재 뷰포트 전체를 차단하는 투명한 마스크 레이어가 있습니다.
3. 모달 상자의 내용은 뷰포트의 특정 위치(보통 중간)에 불투명한 색상(보통 흰색)으로 나타납니다.
4. 모달 상자의 내용(보통 오른쪽 상단에 있음)에 닫기 기호가 표시됩니다. 이를 클릭하면 모달 상자가 숨겨집니다.
5. 모달박스의 내용은 실제 비즈니스 시나리오에 따라 명시되어야 하므로 어떤 구조로든 가능합니다.
스타일
1. .modalbox는 처음에는 숨겨져 있습니다.
1. .modalbox는 투명한 마스크 레이어입니다.
2. .modalbox-dialog는 불투명 콘텐츠 레이어입니다.
3. 모달 상자 표시 링크를 클릭하면 .modalbox가 표시됩니다.
4. .modalbox-close-btn을 클릭하면 .modalbox가 숨겨집니다.
효과예
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.