Bootstrap - Modals: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới thú vị của Bootstrap Modals. Đừng lo lắng nếu bạn chưa từng nghe về chúng trước đây - vào cuối bài hướng dẫn này, bạn sẽ có thể tạo ra các cửa sổ pop-up như một chuyên gia!

Modal là gì?

Trước khi chúng ta bắt đầu, hãy hiểu modal là gì. Hãy tưởng tượng bạn đang đọc một cuốn sách, và bỗng nhiên một tờ note dán nhỏ xuất hiện với thông tin quan trọng. Đó chính là điều mà modal làm trên một trang web! Nó là một hộp thoại hoặc cửa sổ popup xuất hiện trên trang hiện tại.

Các thành phần của Modal

Hãy bắt đầu với cấu trúc cơ bản của một modal Bootstrap:

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Tiêu đề Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
</div>
<div class="modal-body">
<p>Nội dung thân của Modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
<button type="button" class="btn btn-primary">Lưu thay đổi</button>
</div>
</div>
</div>
</div>

Hãy phân tích này:

• <div> ngoài cùng với class "modal" là container chính.
• Bên trong, chúng ta có "modal-dialog" để kiểm soát hình dạng và vị trí của modal.
• "modal-content" chứa nội dung thực tế của modal.
• Chúng ta có ba phần: header, body và footer.

Backdrop tĩnh

Đôi khi, bạn muốn modal của bạn ở lại cho đến khi người dùng tương tác với nó. Đó là lúc backdrop tĩnh rất hữu ích:

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- Nội dung Modal ở đây -->
</div>

Bằng cách thêm data-bs-backdrop="static", modal sẽ không đóng khi nhấp ngoài nó. data-bs-keyboard="false" ngăn không cho đóng bằng phím Esc.

Modal có thể cuộn

Có rất nhiều nội dung? Không có vấn đề! Hãy làm modal của bạn có thể cuộn:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Nội dung Modal ở đây -->
</div>

Thêm class modal-dialog-scrollable cho phép thân modal cuộn trong khi giữ header và footer ở vị trí.

Căn giữa theo chiều dọc

Muốn modal của bạn nằm chính giữa màn hình? Dễ như trở bàn tay!

<div class="modal-dialog modal-dialog-centered">
<!-- Nội dung Modal ở đây -->
</div>

Class modal-dialog-centered sẽ làm phép màu để căn giữa modal theo chiều dọc.

Tooltips và Popovers

Bạn thậm chí có thể sử dụng tooltips và popovers trong modal của mình. Chỉ cần nhớ khởi tạo chúng:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

Sử dụng lưới

Hệ thống lưới của Bootstrap cũng hoạt động trong modal! Dưới đây là một ví dụ:

<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 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

Điều này tạo ra một bố cục hai cột trong thân modal.

Thay đổi nội dung Modal

Bạn có thể thay đổi nội dung của modal một cách động. Dưới đây là cách làm:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = 'Tin nhắn mới cho ' + recipient
modalBodyInput.value = recipient
})

Script này thay đổi nội dung của modal dựa trên nút nào đã kích hoạt nó.

Chuyển đổi giữa các Modals

Bạn thậm chí có thể chuyển đổi giữa các modals khác nhau:

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- Nội dung Modal đầu tiên -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Mở modal thứ hai</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- Nội dung Modal thứ hai -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Trở lại modal đầu tiên</button>
</div>

Thay đổi动画

Muốn làm cho modal của bạn nổi bật hơn khi xuất hiện? Hãy thử thay đổi animation:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Nội dung Modal -->
</div>

Class fade thêm hiệu ứng mờ dần. Bạn có thể tạo các animation tùy chỉnh bằng CSS!

Chiều cao động

Modals có thể điều chỉnh chiều cao dựa trên nội dung:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Nội dung Modal với chiều cao thay đổi -->
</div>

Class modal-dialog-scrollable đảm bảo modal của bạn trông đẹp mắt bất kể độ dài nội dung.

Khả năng truy cập

Luôn luôn xem xét khả năng truy cập! Sử dụng aria-labelledby để tham chiếu tiêu đề 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">Tiêu đề Modal</h5>
<!-- Phần còn lại của nội dung modal -->
</div>
</div>
</div>
</div>

Kích thước tùy chọn

Modals có kích thước khác nhau:

<!-- Modal nhỏ -->
<div class="modal-dialog modal-sm">...</div>

<!-- Modal lớn -->
<div class="modal-dialog modal-lg">...</div>

<!-- Modal rất lớn -->
<div class="modal-dialog modal-xl">...</div>

Modal toàn màn hình

Muốn modal của bạn chiếm toàn bộ màn hình? Sử dụng các class fullscreen:

<div class="modal-dialog modal-fullscreen">
<!-- Nội dung Modal -->
</div>

Bạn cũng có thể làm cho nó fullscreen chỉ trên một số kích thước màn hình:

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- Nội dung Modal -->
</div>

Modal này sẽ toàn màn hình trên màn hình nhỏ và nhỏ hơn.

Và đó là tất cả! Bây giờ bạn đã có kiến thức để tạo ra những modals tuyệt vời bằng Bootstrap. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngại thử nghiệm với các khái niệm này. Chúc bạn may mắn với việc lập trình!

Credits: Image by storyset