Modal là cửa sổ tách biệt khỏi cửa sổ chính của trang web. Mục đích chính là vô hiệu hóa cửa sổ chính khỏi tương tác người dùng và chia sẻ thông tin hoặc xác nhận với người dùng. Cửa sổ modal phổ biến dùng làm thành phần đăng nhập, xác nhận đầu vào, hoặc vô số dùng khác.
Bootstrap là framework giúp tạo thành phần siêu nhanh. Bài viết này xem cách thiết lập Bootstrap, tại sao cần modal, và ví dụ modal hoạt động dùng framework Bootstrap.
Bắt đầu
Để xem modal trên trang web, đảm bảo có phụ thuộc phù hợp. Dự án cần Bootstrap, Popper.JS và jQuery. Truy cập trang Quick Start Bootstrap để hỗ trợ lấy phụ thuộc.
Tùy bạn cách liên kết gói, nhưng cách dễ nhất, thân thiện người mới là dùng CDN cho jQuery, Popper.js, và Bootstrap. Cẩn thận thứ tự thẻ <script> — thứ tự quan trọng.
Khi nào dùng Modal
Modal tuyệt vời cho ứng dụng web cần thu hút chú ý người dùng thỉnh thoảng.
Khi đăng nhập trang ngân hàng, chuyển tab khác, quay lại trang đầu, bạn có thể thấy modal hiện ra, báo sẽ đăng xuất do không hoạt động. Phát hiện không hoạt động là ví dụ điển hình cần modal. Thiết lập ngân hàng không cho tương tác thêm cho đến khi người dùng quyết định tiếp tục đăng nhập hoặc đăng xuất.
Từ góc độ phát triển, modal giúp trang web không tải lại trang mới khi không cần thiết. Nhiều nhà bán lẻ dùng cách này cung cấp "Xem nhanh" (Quick View) cho người dùng để điều hướng nhanh hơn, mua sắm nhanh hơn. Xem nhanh không yêu cầu tải lại toàn trang để lấy thông tin món hàng.
Nếu người dùng cần truy cập nội dung màn hình chính khi tương tác modal, hãy dùng phần tử UI khác. Điểm của modal là lấy quyền tương tác cửa sổ chính, trao quyền cho modal.
Dùng Bootstrap tạo Modal
Modal truyền thống xây bằng HTML, CSS và JavaScript. Tất cả ngôn ngữ này quan trọng, nhưng JavaScript là chìa khóa bật/tắt modal.
Khi dùng Bootstrap, tốt nhất có tài liệu ở tay để copy/paste mã modal đúng. Khi học Bootstrap, cách các thành phần hoạt động, khuyên copy/paste rồi comment mã để biết từng dòng làm gì.
Vì không phát minh lại bánh xe bằng mã modal Bootstrap, quan trọng biết cách hoạt động để giải thích cho người khác. Không đáng copy/paste nếu không giải thích được tại sao hoạt động.
Kích hoạt Modal bằng Nút bấm
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Mở modal demo </button>
Mã này từ tài liệu Bootstrap về tạo modal dùng framework. Phần còn lại giải thích mã để hiểu nghĩa đánh dấu. Chúng ta tập trung vào thuộc tính.
class="btn btn-primary"
Chúng ta biết class nghĩa gì với CSS. Ở đây không khác. Các lớp tương ứng với bảng định kiểu Bootstrap tham chiếu trong head HTML.
Lớp "btn" kiểm soát hầu hết kiểu nút; màu do tên lớp thứ hai. Thử đổi "btn-primary" thành màu nút phổ biến khác (ví dụ btn-secondary hoặc btn-danger) xem sao.
data-toggle="modal"
Thuộc tính này tương ứng với thuộc tính data-dismiss là phần nút bên trong modal.
data-target="#exampleModal"
Thuộc tính data-target nhắm đến khối mã có id exampleModal. exampleModal là nội dung modal thực tế. Nó lấy thông tin từ khối được xác định.
Điều này đặc biệt quan trọng nếu có nhiều modal trên cùng trang. Bạn muốn đổi data-target và id để chỉ một modal mở tại một thời điểm.
Trình xử lý sự kiện (Event handlers) được Bootstrap quản lý dùng jQuery và Popper.js. Không cần lo xử lý khi nhấp vì đã làm sẵn! Để tiếp tục hoạt động, đừng đổi tên lớp gốc vì đó là cách chúng được chọn trong CSS.
Phần tử Modal Chính
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> ... Nội dung modal ... </div>
Giống trên, mã từ tài liệu Bootstrap. Mục đích phần này xem mã để chắc nghĩa.
class="modal fade"
Phần tử modal chính được kích hoạt bằng nút trên trang chính. Tên lớp ở đây chỉ ra hai bộ chọn riêng cho modal. Thứ nhất chỉ kiểu dáng modal. Thứ hai chỉ phần tử chuyển tiếp dùng kỹ thuật fade-in/fade-out.
id="exampleModal"
Chúng ta đã thấy id trước. Nó dùng nhắm phần tử thay đổi kiểu. Ở đây, nó cũng là đích của nút kích hoạt trang chính. Khớp thuộc tính "data-target".
tabindex="-1"
tabindex thường chỉ phần tử truy cập được bằng bàn phím. Không đúng khi số âm. Nó sẽ được focus bằng JavaScript và/hoặc sự kiện nhấp.
aria-labelledby="exampleModalLabel" aria-hidden="true"
Thuộc tính aria đơn giản liên quan khả năng tiếp cận. aria-labelledby thường liên kết với id modal-title. Giá trị true của aria-hidden chỉ không được trình đọc màn hình thấy.
Tạo Phần tử Modal Riêng với Bootstrap Starter
Bạn có thể thêm phong cách vào modal Bootstrap bằng cách đổi kiểu dáng. Tính chất cascading của CSS vẫn tối cao nên ghi đè CSS có thể bằng cách tạo lớp mới gắn vào tên lớp cách nhau dấu cách, hoặc ghi đè tên lớp dùng từ khóa important. Cách sau chỉ dùng trường hợp cực đoan. Thường thấy thay đổi bằng tên lớp tùy chỉnh.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Bootstrap Modal</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Link to Bootstrap Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<style>
body { max-width: 1400px; width: 100%; padding: 20px; margin: 20px; }
.btn-ck { background-color: goldenrod; border: 1px solid black; color: black; }
.btn-ck:hover { background-color: rgb(231, 203, 131); border: 1px solid lightgray; }
.custom-modal { background: rgb(250, 249, 243); height: 400px; width: 500px; position: fixed; top: center; left: center; }
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy"> Bạn dùng trình duyệt <strong>lỗi thời</strong>. Hãy <a href="#">nâng cấp trình duyệt</a> cải thiện trải nghiệm. </p>
<![endif]-->
<!-- Nút kích hoạt modal -->
<h1>Ví dụ Modal</h1>
<button type="button" class="btn btn-primary btn-ck" data-toggle="modal" data-target="#exampleModal">
Mở modal demo
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content custom-modal">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> CareerKarma Demo Modal </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Bạn đang đọc modal với chút tùy chỉnh kiểu dáng...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> Đóng </button>
<button type="button" class="btn btn-primary btn-ck"> Lưu thay đổi </button>
</div>
</div>
</div>
</div>
<!-- CDN sau thẻ body đóng -->
<!-- jquery CDN trước -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" async defer></script>
<!-- popper.js CDN thứ hai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js" async defer></script>
<!-- bootstrap CDN thứ ba -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js" async defer></script>
</body>
</html>
Trong trình soạn thảo trên, chúng ta dùng CSS thay đổi kiểu nút và nền modal. Ví dụ này, tôi thêm lớp tùy chỉnh thay vì ghi đè CSS Bootstrap dùng !important.
Kết luận
Rào cản chính khi tạo modal dùng Bootstrap là đảm bảo đọc tài liệu đúng. Thường nếu lỗi, do lỗi copy/paste, lỗi vị trí CDN/stylesheet trong head/body HTML, hoặc CSS không nhắm đúng phần tử.
Một phần tùy chỉnh sẽ đến qua thử và sai. Tuyệt vời là tài liệu Bootstrap rất kỹ — nếu chưa học framework/gói khác, bạn may mắn vì tài liệu khá hay và đơn giản.