부트스트랩 JS 모달
모달 CSS 클래스
모달 에 대한 튜토리얼은 부트스트랩 모달 튜토리얼 을 읽어보세요 .
Class | Description | Example |
---|---|---|
.modal |
Creates a modal | |
.modal-content |
Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer | |
.modal-dialog-centered |
Centers the modal vertically and horizontally within the page | |
.modal-dialog-scrollable |
Adds a scrollbar inside the modal | |
.modal-header |
Defines the style for the header of the modal | |
.modal-body |
Defines the style for the body of the modal | |
.modal-footer |
Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class | |
.modal-sm |
Specifies a small modal | |
.modal-lg |
Specifies a large modal | |
.fade |
Adds an animation/transition effect which fades the modal in and out |
데이터-* 속성을 통해 모달 트리거
모든 요소에 data-toggle="modal"
and 를 추가 합니다.data-target="#modalID"
참고: 요소의 경우 <a>
생략 data-target
하고
href="#modalID"
대신 사용하십시오.
예시
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
JavaScript를 통해 트리거
다음을 사용하여 수동으로 활성화:
예시
$("#myModal").modal()
모달 옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 data-backdrop=""에서와 같이 옵션 이름을 data-에 추가합니다.
Name | Type | Default | Description | Try it |
---|---|---|---|---|
backdrop | boolean or the string "static" | true |
Specifies whether the modal should have a dark overlay:
If you specify the value "static", it is not possible to close the modal when clicking outside of it |
|
keyboard | boolean | true | Specifies whether the modal can be closed with the escape key (Esc):
|
|
show | boolean | true | Specifies whether to show the modal when initialized |
모달 방법
다음 표에는 사용 가능한 모든 모달 방법이 나열되어 있습니다.
Method | Description | Try it |
---|---|---|
.modal(options) | Activates the content as a modal. See options above for valid values | |
.modal("toggle") | Toggles the modal | |
.modal("show") | Opens the modal | |
.modal("hide") | Hides the modal |
모달 이벤트
다음 표에는 사용 가능한 모든 모달 이벤트가 나열되어 있습니다.
Event | Description | Try it |
---|---|---|
show.bs.modal | Occurs when the modal is about to be shown | |
shown.bs.modal | Occurs when the modal is fully shown (after CSS transitions have completed) | |
hide.bs.modal | Occurs when the modal is about to be hidden | |
hidden.bs.modal | Occurs when the modal is fully hidden (after CSS transitions have completed) |