모달

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

작동 방식

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

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

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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

예

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

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

수직 중앙

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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-*속성 ( jQuery 를 통해 가능)을 사용 하여 클릭한 버튼에 따라 모달의 내용을 변경합니다.

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

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

애니메이션 제거

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

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

동적 높이

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

접근성

모달 제목을 참조하는 role="dialog"및 , to 및 자체 를 추가해야 합니다. 또한 on 을 사용하여 모달 대화 상자에 대한 설명을 제공할 수 있습니다 .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube 동영상 삽입

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

옵션 크기

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

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

용법

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

데이터 속성을 통해

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

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

자바스크립트를 통해

myModal한 줄의 JavaScript 로 id를 사용하여 모달을 호출합니다 .

$('#myModal').modal(options)

옵션

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

이름	유형	기본	설명
배경	부울 또는 문자열`'static'`	진실	모달 배경 요소를 포함합니다. 또는 `static`클릭 시 모달을 닫지 않는 배경을 지정하십시오.
건반	부울	진실	이스케이프 키를 누르면 모달을 닫습니다.
집중하다	부울	진실	초기화 시 모달에 포커스를 둡니다.
보여 주다	부울	진실	초기화될 때 모달을 표시합니다.

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 종료되기 전에 호출자에게 반환됩니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

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

`.modal(options)`

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

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

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

$('#myModal').modal('toggle')

`.modal('show')`

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

$('#myModal').modal('show')

`.modal('hide')`

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

$('#myModal').modal('hide')

`.modal('handleUpdate')`

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

$('#myModal').modal('handleUpdate')

`.modal('dispose')`

요소의 모달을 파괴합니다.

이벤트

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

이벤트 유형	설명
show.bs.modal	`show`이 이벤트는 인스턴스 메서드가 호출 되는 즉시 발생합니다 . 클릭으로 인해 발생한 경우 클릭된 요소는 `relatedTarget`이벤트의 속성으로 사용할 수 있습니다.
표시됨.bs.modal	이 이벤트는 모달이 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 기다림). 클릭으로 인해 발생한 경우 클릭된 요소는 `relatedTarget`이벤트의 속성으로 사용할 수 있습니다.
hide.bs.modal	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.modal	이 이벤트는 모달이 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

모달