Phương thức Bootstrap JS
Các lớp CSS phương thức
Để có hướng dẫn về Phương thức, hãy đọc Hướng dẫn về Phương thức Bootstrap của chúng tôi .
| 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 |
Kích hoạt phương thức Qua dữ liệu- * Thuộc tính
Thêm data-toggle="modal"và data-target="#modalID"vào bất kỳ phần tử nào.
Lưu ý: Đối với <a>các phần tử, hãy bỏ qua data-targetvà sử dụng
href="#modalID"thay thế:
Thí dụ
<!-- 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>
Kích hoạt Qua JavaScript
Bật theo cách thủ công với:
Thí dụ
$("#myModal").modal()
Tùy chọn phương thức
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-backdrop = "".
| 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 |
Phương thức Modal
Bảng sau liệt kê tất cả các phương thức phương thức có sẵn.
| 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 |
Sự kiện phương thức
Bảng sau liệt kê tất cả các sự kiện phương thức có sẵn.
| 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) |