부트스트랩에서 모달은 상위 양식을 덮는 하위 양식인 "모달 상자"를 의미하며, 그 목적은 상위 양식을 벗어나지 않고 별도의 소스에서 콘텐츠를 표시하는 것입니다. 모달 상자는 사용자 알림, 방문자 상호 작용, 메시지 경고 또는 맞춤형 콘텐츠 상호 작용을 위해 눈길을 끄는 프롬프트와 상호 작용을 웹 사이트에 추가할 수 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터
Modal은 상위 폼을 덮는 하위 폼입니다. 일반적으로 목적은 상위 양식을 벗어나지 않고도 상호 작용이 가능한 별도 소스의 콘텐츠를 표시하는 것입니다. 하위 양식은 정보, 상호 작용 등을 제공합니다.
Bootstrap 팝업 모달 상자 스타일
Bootstrap의 JavaScript 모달 상자 플러그인을 사용하여 사용자 알림, 방문자 상호 작용, 메시지 경고 또는 맞춤형 콘텐츠 상호 작용을 위해 눈길을 끄는 프롬프트와 상호 작용을 웹 사이트에 추가하세요.
모달 상자 닫기:
작동 원리
를 클릭하세요.
팝업 모달은 HTML, CSS 및 Javascript로 만들어졌습니다. 모달 자체의 콘텐츠를 스크롤할 수 있도록 에서 스크롤 이벤트를 문서화하고 제거하세요.
동적 모듈 상자를 자동으로 닫으려면 모달 상자의 "배경"(회색 배경 영역)을 클릭하세요.
Bootstrap은 한 번에 하나의 모달 창만 지원하며 중첩 모드는 지원하지 않습니다. 중첩으로 인해 사용자 경험이 저하되기 때문입니다.
모달 상자는 프레젠테이션의 다른 요소와 매우 다른 위치: 고정을 사용합니다. 다른 요소의 간섭을 피하기 위해 팝업 모달 상자의 HTML을 최대한 최상위 수준에 배치하십시오. 특히 .modal 이벤트가 다른 고정 요소에도 정의되어 있는 경우 문제가 발생할 수 있습니다.
위치: 고정 속성의 영향도 받습니다. 모바일 장치에서 모달 박스를 사용할 때 몇 가지 주의 사항이 있습니다.
HTML5의 의미론적 정의에 따르면 autofocusHTML 속성은 Bootstrap 모달 상자에 영향을 미치지 않습니다. 동일한 효과를 얻으려면 일부 JavaScript를 사용해야 합니다.
Normal 모달 상자
.modal: 모달 상자의 가장 바깥쪽 컨테이너입니다.
.modal-dialog: 모달 상자 컨테이너.
.modal-content: 모달 상자의 콘텐츠를 배치하고 모달 상자 스타일을 설정합니다.
.modal-header: 모달 상자 헤더.
.modal-title: 모달 상자 제목.
.modal-body: 모달 상자의 주요 내용입니다.
.modal-footer: 모달 상자 바닥글 콘텐츠.
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通的模态框</button>
</div>
</div>
</div>
로그인 후 복사
스크롤 막대가 있는 모달 상자
사용자 뷰포트(팝업 콘텐츠 영역) 또는 장치의 모달이 길어지면 자동으로 페이지를 스크롤합니다.
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">有滚动条的模态框</button>
</div>
</div>
</div>
로그인 후 복사
수직 중심 모달
.modal-dialog 대화 상자에 .modal-dialog-centered를 추가하여 모달을 수직 중앙에 배치합니다.
작동 원리
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
