부트스트랩 모달 플러그인

모달 플러그인

Modal 플러그인은 현재 페이지 상단에 표시되는 대화 상자/팝업 창입니다.

팁: 플러그인은 개별적으로(Bootstrap의 개별 "modal.js" 파일 사용) 또는 한 번에 모두 포함("bootstrap.js" 또는 "bootstrap.min.js" 사용)할 수 있습니다.

모달을 만드는 방법

다음 예제에서는 기본 모달을 만드는 방법을 보여줍니다.

예시

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

</div>
</div>

예시 설명

"트리거" 부분:

모달 창을 트리거하려면 버튼이나 링크를 사용해야 합니다.

그런 다음 두 개의 data-* 속성을 포함합니다.

data-toggle="modal"모달 창을 엽니다
data-target="#myModal" 모달의 id를 가리킨다.

"모달" 부분:

모달 의 부모 <div>는 모달("myModal")을 트리거하는 데 사용되는 데이터 대상 속성의 값과 동일한 ID를 가져야 합니다.

.modal클래스는 의 콘텐츠를 모달로 식별하고 포커스 <div>를 가져옵니다.

클래스 는 .fade모달을 페이드 인 및 페이드 아웃하는 전환 효과를 추가합니다. 이 효과를 원하지 않으면 이 클래스를 제거하십시오.

이 속성 role="dialog"은 스크린 리더를 사용하는 사람들의 접근성을 향상시킵니다.

클래스는 모달 의 .modal-dialog적절한 너비와 여백을 설정합니다.

"모달 콘텐츠" 부분:

<div>with class="modal-content"는 모달(테두리, 배경색 등)의 스타일을 지정합니다. 이 안에 모달 <div>의 머리글, 본문 및 바닥글을 추가합니다.

.modal-header클래스는 모달 헤더의 스타일을 정의하는 데 사용됩니다 . <button>헤더 내부에는 data-dismiss="modal"클릭하면 모달을 닫는 속성이 있습니다 . .close클래스는 닫기 버튼의 스타일을 지정하고 클래스 .modal-title는 적절한 줄 높이로 헤더 스타일을 지정합니다.

.modal-body클래스는 모달 본문의 스타일을 정의하는 데 사용됩니다 . 여기에 HTML 마크업을 추가하십시오. 단락, 이미지, 비디오 등

.modal-footer클래스는 모달의 바닥글 스타일을 정의하는 데 사용됩니다 . 이 영역은 기본적으로 오른쪽 정렬되어 있습니다.

모달 크기

.modal-sm 작은 모달에 대한 클래스 또는 큰 모달에 대한 클래스를 추가하여 모달의 크기를 변경합니다 .modal-lg.

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

작은 모달

대형 모달

기본적으로 모달은 중간 크기입니다.

완전한 부트스트랩 모달 참조

모든 모달 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS Modal Reference 로 이동하십시오 .

❮ 이전의 다음 ❯

부트스트랩 3 튜토리얼

부트스트랩 그리드

부트스트랩 테마

부트스트랩 예제

부트스트랩 CSS 참조

부트스트랩 JS 참조