Làm thế nào nó hoạt động
Trước khi bắt đầu với thành phần phương thức Bootstrap, hãy chắc chắn đọc những điều sau đây vì các tùy chọn menu của chúng tôi gần đây đã thay đổi.
- Các phương thức được xây dựng với HTML, CSS và JavaScript. Họ đã định vị mọi thứ khác trong tài liệu và xóa cuộn từ
3 để thay vào đó, nội dung phương thức.Launch demo modal Modal title ... Close Save changes - Nhấp vào Phông nền Modal Modal sẽ tự động đóng phương thức.
- Bootstrap chỉ hỗ trợ một cửa sổ phương thức tại một thời điểm. Các phương thức lồng nhau được hỗ trợ vì chúng tôi tin rằng chúng là trải nghiệm người dùng kém.
- Các phương thức sử dụng
4, đôi khi có thể hơi đặc biệt về kết xuất của nó. Bất cứ khi nào có thể, hãy đặt HTML phương thức của bạn ở vị trí cấp cao nhất để tránh sự can thiệp tiềm năng từ các yếu tố khác. Bạn có thể gặp phải các vấn đề khi làm tổLaunch demo modal Modal title ... Close Save changes
5 trong một phần tử cố định khác.Launch demo modal Modal title ... Close Save changes - Một lần nữa, do
4, có một số cảnh báo với việc sử dụng phương thức trên thiết bị di động. Xem tài liệu hỗ trợ trình duyệt của chúng tôi để biết chi tiết.Launch demo modal Modal title ... Close Save changes - Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính ____27 HTML không có hiệu lực trong các phương thức Bootstrap. Để đạt được hiệu ứng tương tự, hãy sử dụng một số JavaScript tùy chỉnh:
var myModal = document.getElementById['myModal']
var myInput = document.getElementById['myInput']
myModal.addEventListener['shown.bs.modal', function [] {
myInput.focus[]
}]
Tiếp tục đọc cho các bản demo và hướng dẫn sử dụng.
Ví dụ
Các thành phần phương thức
Dưới đây là một ví dụ phương thức tĩnh [có nghĩa là
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch static backdrop modal
Modal title
...
Close
Understood
Văn bản cơ thể phương thức đi đây.
Modal title
Modal body text goes here.
Close
Save changes
Bản thử trực tiếp
Chuyển đổi bản demo phương thức hoạt động bằng cách nhấp vào nút bên dưới. Nó sẽ trượt xuống và mờ dần từ đầu trang.
Launch demo modal
Modal title
...
Close
Save changes
Bối cảnh tĩnh
Khi phông nền được đặt thành tĩnh, phương thức sẽ không đóng khi nhấp vào bên ngoài. Nhấp vào nút bên dưới để thử nó.
Launch static backdrop modal
Modal title
...
Close
Understood
Cuộn nội dung dài
Khi các phương thức trở nên quá dài đối với chế độ xem hoặc thiết bị của người dùng, chúng sẽ cuộn độc lập với chính trang. Hãy thử bản demo dưới đây để xem chúng tôi muốn nói gì.
Bạn cũng có thể tạo một phương thức có thể cuộn cho phép cuộn thân phương thức bằng cách thêm
Launch static backdrop modal
Modal title
...
Close
Understood
Launch static backdrop modal
Modal title
...
Close
Understood
...
Theo chiều dọc tập trung
Thêm
Launch static backdrop modal
Modal title
...
Close
Understood
Launch static backdrop modal
Modal title
...
Close
Understood
...
...
Tooltips và popover
Các chú giải công cụ và popover có thể được đặt trong các phương thức khi cần thiết. Khi các phương thức được đóng lại, bất kỳ công cụ và popovers nào cũng được tự động loại bỏ.
Popover in a modal
This button triggers a popover on click.
Tooltips in a modal
This link and that link have tooltips on hover.
Sử dụng lưới
Sử dụng hệ thống lưới bootstrap trong một phương thức bằng cách làm tổ
Launch static backdrop modal
Modal title
...
Close
Understood
Launch static backdrop modal
Modal title
...
Close
Understood
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Nội dung phương thức khác nhau
Có một loạt các nút mà tất cả đều kích hoạt cùng một phương thức với nội dung hơi khác nhau? Sử dụng các thuộc tính
Launch static backdrop modal
Modal title
...
Close
Understood
Launch static backdrop modal
Modal title
...
Close
Understood
Dưới đây là bản demo trực tiếp theo sau là ví dụ HTML và JavaScript. Để biết thêm thông tin, hãy đọc các tài liệu về sự kiện phương thức để biết chi tiết về
Launch static backdrop modal
Modal title
...
Close
Understood
Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
New message
Recipient:
Message:
Close
Send message
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
}]
Chuyển đổi giữa các phương thức
Chuyển đổi giữa nhiều phương thức với một số vị trí thông minh của các thuộc tính
...
...
Modal title
Modal body text goes here.
Close
Save changes
Thay đổi hoạt hình
Biến
...
Launch static backdrop modal
Modal title
...
Close
Understood
...
Launch static backdrop modal
Modal title
...
Close
Understood
Nếu bạn muốn một hình ảnh hoạt hình phóng to, bạn có thể đặt
...
Loại bỏ hoạt hình
Đối với các phương thức chỉ đơn giản là xuất hiện thay vì mờ dần để xem, hãy xóa lớp
...
Modal title
Modal body text goes here.
Close
Save changes
Chiều cao động
Nếu chiều cao của một phương thức thay đổi trong khi nó mở, bạn nên gọi
...
Khả năng tiếp cận
Hãy chắc chắn để thêm
...
Launch demo modal
Modal title
...
Close
Save changes
...
...
Launch demo modal
Modal title
...
Close
Save changes
...
...
Nhúng video YouTube
Nhúng video YouTube trong các phương thức yêu cầu JavaScript bổ sung không phải trong Bootstrap để tự động ngừng phát lại và hơn thế nữa. Xem bài đăng Stack Overflow hữu ích này để biết thêm thông tin.
Kích thước tùy chọn
Các phương thức có ba kích thước tùy chọn, có sẵn thông qua các lớp sửa đổi sẽ được đặt trên
Launch static backdrop modal
Modal title
...
Close
Understood
| Nhỏ bé | | |
| Mặc định | Không có | |
| Lớn | | |
| Cực lớn | | |
Phương thức mặc định của chúng tôi mà không có lớp sửa đổi tạo thành phương thức kích thước trung bình trên mạng.
Modal title
Modal body text goes here.
Close
Save changes
Modal toàn màn hình
Một ghi đè khác là tùy chọn để bật lên một phương thức bao gồm chế độ xem người dùng, có sẵn thông qua các lớp sửa đổi được đặt trên
Launch static backdrop modal
Modal title
...
Close
Understood
| Luôn luôn |
| Dưới đây |
| Dưới đây |
| Dưới đây |
| Dưới đây |
| Dưới đây |
Modal title
Modal body text goes here.
Close
Save changes
Sass
Biến
Modal title
Modal body text goes here.
Close
Save changes
Vòng
Các phương thức toàn màn hình đáp ứng được tạo thông qua bản đồ
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Modal title
Modal body text goes here.
Close
Save changes
Cách sử dụng
Plugin Modal tắt nội dung ẩn của bạn theo yêu cầu, thông qua các thuộc tính dữ liệu hoặc JavaScript. Nó cũng ghi đè hành vi cuộn mặc định và tạo
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Thông qua các thuộc tính dữ liệu
Kích hoạt một phương thức mà không cần viết javascript. Đặt
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Modal title
Modal body text goes here.
Close
Save changes
Thông qua JavaScript
Tạo một phương thức với một dòng JavaScript:
Modal title
Modal body text goes here.
Close
Save changes
Tùy chọn
Các tùy chọn có thể được truyề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
Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
New message
Recipient:
Message:
Close
Send message
Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
New message
Recipient:
Message:
Close
Send message
| boolean hoặc chuỗi | | Bao gồm một phần tử modal-backdrop. Ngoài ra, chỉ định |
| Boolean | | Bao gồm một phần tử modal-backdrop. Ngoài ra, chỉ định |
| Boolean | | Bao gồm một phần tử modal-backdrop. Ngoài ra, chỉ định |
Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
New message
Recipient:
Message:
Close
Send message
6
Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
New message
Recipient:
Message:
Close
Send message
Boolean
Đóng phương thức khi nhấn phím Escapeasynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
New message
Recipient:
Message:
Close
Send message
Đặt trọng tâm vào phương thức khi khởi tạo.
Phương pháp
Modal title
Modal body text goes here.
Close
Save changes
Phương pháp và chuyển tiếp không đồng bộ
Tất cả các phương thức API đều không đồng bộ và bắt đầu chuyển đổi. Họ trở lại với người gọi ngay khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua.Returns to the caller before the modal has actually been shown or hidden [i.e. before the
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
}]
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
}]
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin.
Vượt qua các tùy chọnReturns to the caller before the modal has actually been shown [i.e. before the
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
}]
Kích hoạt nội dung của bạn như một phương thức. Chấp nhận một tùy chọn tùy chọn
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
}]
Modal title
Modal body text goes here.
Close
Save changes
Chuyển đổi
Thủ công bật một phương thức. Trả về người gọi trước khi phương thức thực sự được hiển thị hoặc ẩn [nghĩa là trước khi sự kiện
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
}]
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
}]
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
}]
buổi bieu diễn
Thủ công mở một phương thức. Trả về cho người gọi trước khi phương thức thực sự được hiển thị [nghĩa là trước khi sự kiện
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
}]
Ngoài ra, bạn có thể chuyển một phần tử DOM như một đối số có thể nhận được trong các sự kiện phương thức [như thuộc tính
Launch static backdrop modal
Modal title
...
Close
Understood
9].
Launch static backdrop modal
Modal title
...
Close
Understood
ẩn giấu
Thủ công ẩn một phương thức. Trả về người gọi trước khi phương thức thực sự bị ẩn [nghĩa là trước khi sự kiện 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
}]
2 xảy ra].
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
}]
xử lý
Launch demo modal
Modal title
...
Close
Save changes
Rửa thủ công vị trí phương thức nếu chiều cao của một phương thức thay đổi trong khi nó được mở [nghĩa là trong trường hợp một thanh cuộn xuất hiện].
Vứt bỏ
Launch demo modal
Modal title
...
Close
Save changes
Phá hủy một yếu tố phương thức. [Xóa dữ liệu được lưu trữ trên phần tử DOM]
getinstance
| boolean hoặc chuỗi |
| Bao gồm một phần tử modal-backdrop. Ngoài ra, chỉ định |
| Boolean |
| Đóng phương thức khi nhấn phím Escape | |
| Đặt trọng tâm vào phương thức khi khởi tạo. | Phương pháp |
Launch demo modal
Modal title
...
Close
Save changes