모달

부트스트랩의 JavaScript 모달 플러그인을 사용하여 라이트박스, 사용자 알림 또는 완전히 사용자 정의된 콘텐츠에 대한 대화 상자를 사이트에 추가하십시오.

이 페이지에서

작동 방식

Bootstrap의 모달 구성 요소를 시작하기 전에 메뉴 옵션이 최근에 변경되었으므로 다음을 읽으십시오.

모달은 HTML, CSS 및 JavaScript로 빌드됩니다. 문서의 다른 모든 항목 위에 배치되고 <body>대신 모달 콘텐츠가 스크롤되도록 스크롤을 제거합니다.
모달 "배경"을 클릭하면 모달이 자동으로 닫힙니다.
부트스트랩은 한 번에 하나의 모달 창만 지원합니다. 중첩된 모달은 사용자 경험이 좋지 않다고 생각하므로 지원되지 않습니다.
모달 position: fixed은 때때로 렌더링에 대해 약간 특별할 수 있는 를 사용합니다. 가능하면 모달 HTML을 최상위 위치에 배치하여 다른 요소의 잠재적인 간섭을 방지하세요. .modal다른 고정 요소 내에 중첩할 때 문제가 발생할 수 있습니다 .
다시 한 번, 로 인해 position: fixed모바일 장치에서 모달을 사용할 때 몇 가지 주의 사항이 있습니다. 자세한 내용은 브라우저 지원 문서 를 참조하십시오.
HTML5가 의미 체계를 정의하는 방식으로 인해 HTML autofocus속성 은 부트스트랩 모달에 영향을 주지 않습니다. 동일한 효과를 얻으려면 일부 사용자 정의 JavaScript를 사용하십시오.

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

데모 및 사용 지침을 계속 읽으십시오.

예

다음은 정적 모달 예제입니다(즉, position재정의 display됨). 모달 헤더, 모달 본문( 에 필수 padding) 및 모달 바닥글(선택 사항)이 포함됩니다. 가능한 한 닫기 작업이 있는 모달 헤더를 포함하거나 다른 명시적 닫기 작업을 제공할 것을 요청합니다.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

라이브 데모

아래 버튼을 클릭하여 작동하는 모달 데모를 전환하세요. 페이지 상단에서 아래로 미끄러지며 페이드 인됩니다.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

정적 배경

배경이 정적으로 설정된 경우 모달 외부를 클릭할 때 모달이 닫히지 않습니다. 아래 버튼을 클릭하여 사용해 보세요.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

긴 콘텐츠 스크롤

모달이 사용자의 뷰포트 또는 장치에 대해 너무 길어지면 페이지 자체와 독립적으로 스크롤됩니다. 우리가 의미하는 바를 보려면 아래 데모를 시도하십시오.

.modal-dialog-scrollable에 추가 하여 모달 본문을 스크롤할 수 있는 스크롤 가능한 모달을 만들 수도 있습니다 .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

수직 중앙

에 추가 .modal-dialog-centered하여 .modal-dialog모달을 세로로 중앙에 배치합니다.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

툴팁 및 팝오버

도구 설명 및 팝오버 는 필요에 따라 모달 내에 배치할 수 있습니다. 모달이 닫히면 그 안에 있는 툴팁과 팝오버도 자동으로 닫힙니다.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

그리드 사용

. _ .container-fluid_ .modal-body그런 다음 다른 곳에서와 마찬가지로 일반 그리드 시스템 클래스를 사용합니다.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

약간 다른 내용으로 동일한 모달을 트리거하는 버튼이 많이 있습니까? event.relatedTarget및 HTML data-bs-*속성 을 사용 하여 클릭한 버튼에 따라 모달의 내용을 변경합니다.

아래는 예제 HTML 및 JavaScript가 뒤따르는 라이브 데모입니다. 자세한 내용은 에 대한 자세한 내용 은 모달 이벤트 문서 를 참조하세요 relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

모달 간 전환

data-bs-target및 data-bs-toggle속성 을 영리하게 배치하여 여러 모달 사이를 전환 합니다. 예를 들어, 이미 열려 있는 로그인 모달 내에서 비밀번호 재설정 모달을 토글할 수 있습니다. 여러 모달을 동시에 열 수 없다는 점에 유의하십시오. 이 방법은 단순히 두 개의 개별 모달 사이를 전환합니다.

첫 번째 모달 열기

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

애니메이션 변경

변수 는 모달 페이드 인 애니메이션 전의 $modal-fade-transform변형 상태를 결정하고 변수 는 모달 페이드 인 애니메이션 이 끝날 때의 변형을 결정합니다 ..modal-dialog$modal-show-transform.modal-dialog

예를 들어 확대 애니메이션을 원하면 을 설정할 수 있습니다 $modal-fade-transform: scale(.8).

애니메이션 제거

보기에 페이드 인하지 않고 단순히 나타나는 모달의 경우 .fade모달 마크업에서 클래스를 제거합니다.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

동적 높이

모달이 열려 있는 동안 높이가 변경되면 myModal.handleUpdate()스크롤바가 나타날 경우를 대비하여 모달의 위치를 재조정하기 위해 호출해야 합니다.

접근성

aria-labelledby="..."에 모달 제목을 참조하여 를 추가해야 합니다 .modal. aria-describedby또한 on 으로 모달 대화 상자에 대한 설명을 제공할 수 있습니다 .modal. role="dialog"JavaScript를 통해 이미 추가했으므로 추가할 필요가 없습니다 .

YouTube 동영상 삽입

YouTube 동영상을 모달에 포함하려면 재생 등을 자동으로 중지하기 위해 부트스트랩이 아닌 추가 JavaScript가 필요합니다. 자세한 내용은 이 유용한 스택 오버플로 게시물 을 참조하세요.

옵션 크기

모달에는 세 가지 선택적 크기가 있으며 수정자 클래스를 통해 .modal-dialog. 이 크기는 더 좁은 뷰포트에서 수평 스크롤바를 피하기 위해 특정 중단점에서 시작됩니다.

크기	수업	모달 최대 너비
작은	`.modal-sm`	`300px`
기본	없음	`500px`
크기가 큰	`.modal-lg`	`800px`
특대	`.modal-xl`	`1140px`

modifier 클래스가 없는 기본 모달은 "중간" 크기 모달을 구성합니다.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

또 다른 재정의는 에 배치된 수정자 클래스를 통해 사용할 수 있는 사용자 뷰포트를 덮는 모달을 팝업하는 옵션입니다 .modal-dialog.

수업	유효성
`.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`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

사스

변수

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

고리

반응형 전체 화면 모달$breakpoints 은 맵과 의 루프를 통해 생성됩니다 scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

용법

모달 플러그인은 데이터 속성 또는 JavaScript를 통해 요청 시 숨겨진 콘텐츠를 토글합니다. 또한 기본 스크롤 동작을 재정의 .modal-backdrop하고 모달 외부를 클릭할 때 표시된 모달을 해제하기 위한 클릭 영역을 제공하도록 생성합니다.

데이터 속성을 통해

JavaScript를 작성하지 않고 모달을 활성화하십시오. data-bs-toggle="modal"버튼과 같은 컨트롤러 요소에서 data-bs-target="#foo"또는 href="#foo"토글할 특정 모달을 대상으로 설정합니다 .

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

자바스크립트를 통해

한 줄의 JavaScript로 모달을 만듭니다.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-bs-와 같이 옵션 이름을 에 추가합니다 data-bs-backdrop="".

이름	유형	기본	설명
`backdrop`	부울 또는 문자열`'static'`	`true`	모달 배경 요소를 포함합니다. 또는 `static`클릭 시 모달을 닫지 않는 배경을 지정하십시오.
`keyboard`	부울	`true`	이스케이프 키를 누르면 모달을 닫습니다.
`focus`	부울	`true`	초기화 시 모달에 포커스를 둡니다.

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오 .

패스 옵션

콘텐츠를 모달로 활성화합니다. 선택적 옵션을 허용합니다 object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

비녀장

수동으로 모달을 토글합니다. 모달이 실제로 표시되거나 숨겨 지기 전에(즉, shown.bs.modal또는 hidden.bs.modal이벤트가 발생하기 전에) 호출자에게 반환합니다.

myModal.toggle()

보여 주다

수동으로 모달을 엽니다. 모달이 실제로 표시 되기 전에(즉, shown.bs.modal이벤트가 발생하기 전에) 호출자에게 반환합니다.

myModal.show()

relatedTarget또한 DOM 요소를 모달 이벤트( 속성 으로)에서 수신할 수 있는 인수로 전달할 수 있습니다 .

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

숨다

수동으로 모달을 숨깁니다. 모달이 실제로 숨겨 지기 전에(즉, hidden.bs.modal이벤트가 발생하기 전에) 호출자에게 반환합니다.

myModal.hide()

핸들업데이트

모달이 열려 있는 동안 높이가 변경되면(즉, 스크롤바가 나타나는 경우) 모달의 위치를 수동으로 재조정합니다.

myModal.handleUpdate()

처분하다

요소의 모달을 파괴합니다. (DOM 요소에 저장된 데이터 제거)

myModal.dispose()

getInstance

DOM 요소와 연결된 모달 인스턴스를 가져올 수 있는 정적 메서드

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

DOM 요소와 연결된 모달 인스턴스를 가져오거나 초기화되지 않은 경우 새 인스턴스를 만들 수 있는 정적 메서드

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

이벤트

부트스트랩의 모달 클래스는 모달 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다. 모든 모달 이벤트는 모달 자체에서 발생합니다(즉, <div class="modal">).

이벤트 유형	설명
`show.bs.modal`	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 . 클릭으로 인한 경우 클릭된 요소는 `relatedTarget`이벤트의 속성으로 사용할 수 있습니다.
`shown.bs.modal`	이 이벤트는 모달이 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 기다림). 클릭으로 인한 경우 클릭된 요소는 `relatedTarget`이벤트의 속성으로 사용할 수 있습니다.
`hide.bs.modal`	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
`hidden.bs.modal`	이 이벤트는 모달이 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
`hidePrevented.bs.modal`	이 이벤트는 모달이 표시되고 배경이 `static`이고 모달 외부를 클릭하거나 키보드 옵션을 사용하거나 `data-bs-keyboard`로 설정한 상태에서 이스케이프 키를 누를 때 시작됩니다 `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})

모달