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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기