여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 모달
Bootstrap – Bootstrap 4 모달
5개월전 작성
6개월전 수정



Bootstrap 4 모달

모달 구성 요소는 현재 페이지 상단에 표시되는 대화 상자/팝업 창이다.

모달을 만드는 방법

예제
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
기본 예시
예제 보기

애니메이션 추가

모달을 열고 닫을 때 페이딩 효과를 추가하려면 .fade 클래스를 사용한다.

예제
<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>
기본 예시
예제 보기

모달 크기

작은 모달용 .modal-sm 클래스, 대형 모달용 .modal-lg 클래스 또는 초대형 모달용 .modal-xl 클래스를 추가하여 모달의 크기를 변경한다.

.modal-dialog 클래스가 있는 <div> 요소 에 크기 클래스를 추가한다.

예제 1
<div class="modal-dialog modal-sm">
기본 예시
예제 보기
예제 2
<div class="modal-dialog modal-lg">
기본 예시
예제 보기
예제 3
<div class="modal-dialog modal-xl">
기본 예시
예제 보기

중심 모달

.modal-dialog-centered 클래스를 사용하여 페이지 내에서 모달을 수직 및 수평 중앙에 배치한다.

예제
<div class="modal-dialog modal-dialog-centered">
기본 예시
예제 보기

스크롤링 모달

모달 내부에 콘텐츠가 많으면 페이지에 스크롤바가 추가된다.

예제
<div class="modal-dialog modal-dialog-scrollable">
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그