Phương thức
Sử dụng plugin phương thức JavaScript của Bootstrap để thêm hộp thoại vào trang web của bạn cho hộp đèn, thông báo của người dùng hoặc nội dung hoàn toàn tùy chỉnh.
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 của Bootstrap, hãy nhớ đọc phần sau vì các tùy chọn menu của chúng tôi gần đây đã thay đổi.
- Các chế độ được xây dựng bằng HTML, CSS và JavaScript. Chúng được định vị trên mọi thứ khác trong tài liệu và loại bỏ cuộn khỏi
<body>để nội dung phương thức cuộn thay thế. - Nhấp vào "phông nền" của phương thức 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 không được hỗ trợ vì chúng tôi cho rằng chúng mang lại trải nghiệm người dùng kém.
- Việc sử dụng các phương thức
position: fixed, đô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 từ các phần tử khác. Bạn có thể sẽ gặp sự cố khi lồng một.modalphần tử cố định khác vào. - Một lần nữa, do
position: fixedđó, có một số lưu ý khi sử dụng các 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. - Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính
autofocusHTML không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnh:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motiontruy vấn phương tiện. Xem phần
chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .
Hãy tiếp tục đọc các bản trình diễn và hướng dẫn sử dụng.
Các ví dụ
Các thành phần phương thức
Dưới đây là một ví dụ về phương thức tĩnh (nghĩa là của nó positionvà displayđã được ghi đè). Bao gồm tiêu đề phương thức, nội dung phương thức (bắt buộc đối với padding) và chân trang phương thức (tùy chọn). Chúng tôi yêu cầu bạn bao gồm tiêu đề phương thức với các hành động loại bỏ bất cứ khi nào có thể hoặc cung cấp một hành động loại bỏ rõ ràng khác.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<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">×</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>
Bản thử trực tiếp
Chuyển đổi bản trình diễn 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.
<!-- 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" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">×</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>
Phông nền 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 phông nền đó. Nhấp vào nút bên dưới để thử nó.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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">Understood</button>
</div>
</div>
</div>
</div>
Cuộn nội dung dài
Khi các phương thức trở nên quá dài đối với khung nhìn 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ử 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 nội dung phương thức bằng cách thêm .modal-dialog-scrollablevào .modal-dialog.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Căn giữa theo chiều dọc
Thêm vào .modal-dialog-centeredgiữa .modal-dialogphương thức theo chiều dọc.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Chú giải công cụ và cửa sổ bật lên
Chú giải công cụ và cửa sổ bật lên có thể được đặt trong các phương thức nếu cần. Khi các phương thức bị đóng, mọi chú giải công cụ và cửa sổ bật lên bên trong cũng tự động bị loại bỏ.
<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>
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ồng .container-fluidvào .modal-body. Sau đó, sử dụng các lớp hệ thống lưới bình thường như bạn làm ở bất kỳ nơi nào khác.
<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>
Thay đổi nội dung phương thức
Có một loạt các nút đề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 event.relatedTargetvà các thuộc tính HTMLdata-* (có thể thông qua jQuery ) để thay đổi nội dung của phương thức tùy thuộc vào nút nào được nhấp.
Dưới đây là bản trình diễn trực tiếp, tiếp theo là HTML và JavaScript mẫu. Để biết thêm thông tin, hãy đọc tài liệu về sự kiện phương thức để biết thêm chi tiết 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" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">×</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)
})
Thay đổi hoạt ảnh
Biến $modal-fade-transformxác định trạng thái chuyển đổi ở .modal-dialogtrước hoạt ảnh mờ dần theo phương thức, $modal-show-transformbiến xác định chuyển đổi .modal-dialogở cuối hoạt ảnh mờ dần theo phương thức.
Nếu bạn muốn một hoạt ảnh phóng to, chẳng hạn, bạn có thể đặt $modal-fade-transform: scale(.8).
Xóa hoạt ảnh
Đối với các phương thức chỉ xuất hiện thay vì mờ dần để xem, hãy xóa .fadelớp khỏi đánh dấu phương thức của bạn.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Độ cao động
Nếu chiều cao của một phương thức thay đổi khi nó đang mở, bạn nên gọi $('#myModal').modal('handleUpdate')để điều chỉnh lại vị trí của phương thức trong trường hợp một thanh cuộn xuất hiện.
Khả năng tiếp cận
Đảm bảo thêm aria-labelledby="...", tham chiếu đến tiêu đề phương thức, đến .modal. Ngoài ra, bạn có thể đưa ra mô tả về hộp thoại phương thức của mình với aria-describedbybật .modal. Lưu ý rằng bạn không cần thêm role="dialog"vì chúng tôi đã thêm nó qua JavaScript.
Nhúng video YouTube
Nhúng video YouTube trong các phương thức yêu cầu JavaScript bổ sung không có trong Bootstrap để tự động dừ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
Phương thức có ba kích thước tùy chọn, có sẵn thông qua các lớp bổ trợ để được đặt trên a .modal-dialog. Các kích thước này kích hoạt tại một số điểm ngắt nhất định để tránh thanh cuộn ngang trên các cửa sổ xem hẹp hơn.
| Kích thước | Lớp | Chiều rộng tối đa theo phương thức |
|---|---|---|
| Nhỏ bé | .modal-sm |
300px |
| Mặc định | Không có | 500px |
| Lớn | .modal-lg |
800px |
| Cực lớn | .modal-xl |
1140px |
Phương thức mặc định của chúng tôi không có lớp bổ trợ tạo thành phư��ng thức kích thước "trung bình".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Cách sử dụng
Plugin phương thức chuyển đổi 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 thêm .modal-openvào <body>để ghi đè hành vi cuộn mặc định và tạo ra một .modal-backdropvùng nhấp chuột để loại bỏ các phương thức được hiển thị khi nhấp vào bên ngoài phương thức.
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 data-toggle="modal"trên một phần tử bộ điều khiển, như một nút, cùng với data-target="#foo"hoặc href="#foo"để nhắm mục tiêu một phương thức cụ thể để chuyển đổi.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Qua JavaScript
Gọi một phương thức có id myModalvới một dòng JavaScript:
$('#myModal').modal(options)
Tùy chọn
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="".
| Tên | Loại hình | Mặc định | Sự mô tả |
|---|---|---|---|
| phông nền | boolean hoặc chuỗi'static' |
thật | Bao gồm một yếu tố phương thức-phông nền. Ngoài ra, chỉ định staticphông nền không đóng phương thức khi nhấp chuột. |
| bàn phím | boolean | thật | Đóng phương thức khi nhấn phím thoát |
| tiêu điểm | boolean | thật | Đặt tiêu điểm vào phương thức khi khởi tạo. |
| buổi bieu diễn | boolean | thật | Hiển thị phương thức khi khởi tạo. |
Phương pháp
Các phương thức và chuyển tiếp không đồng bộ
Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Chúng trở lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .
.modal(options)
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 object.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Chuyển đổi một phương thức theo cách thủ công. Trả về cho người gọi trước khi phương thức thực sự được hiển thị hoặc bị ẩn (tức là trước khi sự kiện shown.bs.modalhoặc hidden.bs.modalsự kiện xảy ra).
$('#myModal').modal('toggle')
.modal('show')
Mở một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự được hiển thị (tức là trước khi shown.bs.modalsự kiện xảy ra).
$('#myModal').modal('show')
.modal('hide')
Ẩn một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự bị ẩn (tức là trước khi hidden.bs.modalsự kiện xảy ra).
$('#myModal').modal('hide')
.modal('handleUpdate')
Điều chỉnh lại vị trí của phương thức theo cách thủ công nếu chiều cao của phương thức thay đổi khi nó đang mở (tức là trong trường hợp thanh cuộn xuất hiện).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Phá hủy phương thức của một phần tử.
Sự kiện
Lớp phương thức của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng phương thức. Tất cả các sự kiện của phương thức được kích hoạt tại chính phương thức (tức là tại <div class="modal">).
| Loại sự kiện | Sự mô tả |
|---|---|
| show.bs.modal | Sự kiện này kích hoạt ngay lập tức khi showphương thức thể hiện được gọi. Nếu do một lần nhấp gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc relatedTargettính của sự kiện. |
| show.bs.modal | Sự kiện này được kích hoạt khi phương thức đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). Nếu do một lần nhấp gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc relatedTargettính của sự kiện. |
| hide.bs.modal | Sự kiện này được kích hoạt ngay lập tức khi hidephương thức thể hiện đã được gọi. |
| hidden.bs.modal | Sự kiện này được kích hoạt khi phương thức hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
| hidePrevented.bs.modal | Sự kiện này được kích hoạt khi phương thức được hiển thị, phông nền của nó staticvà một cú nhấp chuột bên ngoài phương thức hoặc nhấn phím thoát được thực hiện với tùy chọn bàn phím hoặc data-keyboardđược đặt thành false. |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})