Bootstrap 5 모달

모달

Modal 컴포넌트는 현재 페이지 상단에 표시되는 대화 상자/팝업 창입니다：

如何创建模态

모달을 생성하는 방법

예제

다음은 기본 모달을 생성하는 방법을 보여줍니다：
<!-- Button to open modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
모달 열기
</button>
<!-- Modal -->
  <div class="modal-dialog">
    <div class="modal" id="myModal">
      <div class="modal-content">
      <!-- Modal title -->
        <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      <!-- Modal body -->
        <div class="modal-body">
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>
      모달 본문 ..
      <!-- Modal footer -->
        <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>
    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>
  <button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>

직접 시험해 보세요

</div>

애니메이션을 추가하려면 사용하세요 .fade 클래스를 추가하여 모달을 열고 닫을 때 흐림 효과를 추가하세요：

예제

<!-- Fading modal -->
<div class="modal fade"></div>
<!-- Modal without animation -->
<div class="modal"></div>

직접 시험해 보세요

모달 크기

소형 모달에 추가하여 .modal-sm 클래스(max-width 300px)을 추가하여 대형 모달에 사용하세요 .modal-lg 클래스(max-width 800px) 또는 초대형 모달에 추가하세요 .modal-xl 모달의 크기를 변경하십시오 (최대 너비 1140 픽셀)。기본적으로 최대 너비는 500 픽셀입니다。

다음을 사용하여 .modal-dialog 클래스와 크기 클래스를 함께 추가하세요 <div> 요소：

Small Modal

<div class="modal-dialog modal-sm">

직접 시험해 보세요

Large Modal

<div class="modal-dialog modal-lg">

직접 시험해 보세요

Extra Large 모달

<div class="modal-dialog modal-xl">

직접 시험해 보세요

기본적으로 모달의 크기는 "medium"(최대 너비 500px)입니다.

전체 화면 모달

모달이 페이지의 전체 너비와 높이를 차지하려면 사용하세요 .modal-fullscreen 클래스:

예제

<div class="modal-dialog modal-fullscreen">

직접 시험해 보세요

반응형 전체 화면 모달

또한 사용할 수 있습니다 .modal-fullscreen-*-* 클래스는 모달이 언제 전체 화면으로 표시되어야 하는지 제어합니다:

클래스 설명 예제
.modal-fullscreen-sm-down 576px 미만에서 전체 화면 직접 시험해 보세요
.modal-fullscreen-md-down 768px 미만에서 전체 화면 직접 시험해 보세요
.modal-fullscreen-lg-down 992px 미만에서 전체 화면 직접 시험해 보세요
.modal-fullscreen-xl-down 1200px 미만에서 전체 화면 직접 시험해 보세요
.modal-fullscreen-xxl-down 1400px 미만에서 전체 화면 직접 시험해 보세요

중앙 모달

중앙에 배치된 모달을 사용하여 .modal-dialog-centric 클래스를 사용하여 페이지 내에서 수직 및 수평으로 모달을 중앙에 배치합니다:

예제

<div class="modal-dialog modal-dialog-centered">

직접 시험해 보세요

스크롤 모달

모달에 많은 내용이 있을 때, 페이지에 스크롤을 추가합니다. 아래의 예제를 통해 이해해 보세요:

예제

<div class="modal-dialog">

직접 시험해 보세요

하지만, 다음과 같이 .modal-dialog-scrollable 추가로 .modal-dialog 모달 내에서만 스크롤이 가능하며, 페이지 자체는 아닙니다:

예제

<div class="modal-dialog modal-dialog-scrollable">

직접 시험해 보세요