Cách dễ dàng xây dựng chế độ với phần tử hộp thoại HTML
Hộp thoại và phương thức là những phần không thể thiếu của hầu hết các ứng dụng web. Mặc dù việc xây dựng chúng bằng tay không phải là một nhiệm vụ phức tạp, nhưng đó là một công việc nhanh chóng trở nên tẻ nhạt đối với bất kỳ nhà phát triển web nào. Giải pháp thay thế thông thường để xây dựng chúng bằng tay là sử dụng một thành phần do người khác xây dựng.
Tuy nhiên, có một số vấn đề với cách tiếp cận này. Có rất nhiều tùy chọn, thật khó để biết thành phần nào sẽ tốt nhất để sử dụng và việc tùy chỉnh giao diện của các thành phần đó đôi khi có thể tẻ nhạt như việc xây dựng một hộp thoại bằng tay. May mắn thay, có một sự thay thế khác: phần tử hộp thoại HTML.
Mục Lục
Phần tử Hộp thoại là gì?
Phần tử hộp thoại HTML là một thẻ HTML được tích hợp sẵn (như div hoặc span), cho phép các nhà phát triển tạo các hộp thoại và phương thức tùy chỉnh. Phần tử hộp thoại đã xuất hiện trong Chrome và Opera từ năm 2014, nhưng chỉ gần đây mới được hỗ trợ bởi tất cả các trình duyệt chính.
Tại sao lại sử dụng phần tử hộp thoại?
Lý do chính để sử dụng phần tử hộp thoại là sự tiện lợi. Nó giúp dễ dàng tạo các hộp thoại có thể xuất hiện nội dòng hoặc hiển thị dưới dạng phương thức, chỉ với một thẻ HTML và một vài dòng JavaScript.
Phần tử hộp thoại loại bỏ nhu cầu xây dựng và gỡ lỗi hộp thoại tùy chỉnh hoặc nhập thành phần của người khác. Nó cũng rất dễ tạo kiểu với CSS.
Hỗ trợ trình duyệt cho phần tử hộp thoại
Thật không may, hỗ trợ của trình duyệt cho phần tử hộp thoại có thể tốt hơn. Nó được hỗ trợ trong các phiên bản mới nhất của tất cả các trình duyệt chính kể từ tháng 3 năm 2022, với một số lưu ý.
Bất kỳ trình duyệt Firefox nào cũ hơn Firefox 98 sẽ chỉ hỗ trợ nó nếu nó được bật theo cách thủ công trong cài đặt trình duyệt và bất kỳ phiên bản Safari nào cũ hơn Safari 15.4 đều không hỗ trợ nó. Chi tiết hỗ trợ trình duyệt đầy đủ có sẵn trên caniuse.
Rất may, điều này không có nghĩa là phần tử hộp thoại không sử dụng được. Nhóm Google Chrome duy trì một polyfill mà bạn có thể tìm thấy trên Github cho phần tử hộp thoại cung cấp hỗ trợ cho phần tử này ngay cả trên các trình duyệt vốn không được hỗ trợ.
Ở dạng hiện tại, phần tử hộp thoại có thể có vấn đề về khả năng tiếp cận, vì vậy, nó có thể phù hợp hơn khi sử dụng thành phần hộp thoại tùy chỉnh như hộp thoại a11y trong các ứng dụng sản xuất.
Cách sử dụng phần tử hộp thoại
Để trình bày cách sử dụng phần tử hộp thoại, bạn sẽ sử dụng phần tử này để xây dựng một tính năng chung của trang web: phương thức xác nhận cho nút xóa.
Tất cả những gì cần thiết để làm theo là một tệp HTML duy nhất.
1. Thiết lập tệp HTML
Bắt đầu bằng cách tạo tệp đã nói và đặt tên là index.html.
Tiếp theo, thiết lập cấu trúc của tệp HTML và cung cấp một số thông tin meta cơ bản về trang, để nó hiển thị đúng trên tất cả các thiết bị.
Nhập mã sau vào index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog demo</title>
</head><style></style>
<body></body>
<script></script>
</html>
Đó là tất cả các thiết lập cần thiết cho dự án này.
2. Viết Đánh dấu
Tiếp theo, viết đánh dấu cho nút xóa, cũng như phần tử hộp thoại.
Nhập mã sau vào thẻ body của index.html:
<div class="button-container">
<button>
Delete item
</button>
</div>
<dialog>
<div>
Are you sure you want to delete this item?
</div>
<div>
<button class="close">
Yes
</button><button class="close">
No
</button>
</div>
</dialog>
HTML ở trên sẽ tạo:
- Một nút xóa.
- Phần tử hộp thoại.
- Hai nút bên trong hộp thoại.
Nếu index.html đang mở trong trình duyệt của bạn, phần tử duy nhất hiển thị trên màn hình sẽ là nút xóa. Điều này không có nghĩa là có gì sai, phần tử hộp thoại chỉ cần một chút JavaScript để hiển thị.
3. Thêm JavaScript
Bây giờ, hãy viết mã sẽ mở hộp thoại khi người dùng nhấp vào nút xóa, cũng như mã để cho phép đóng hộp thoại.
Nhập nội dung sau vào thẻ script của index.html:
const modal = document.querySelector("dialog")
document.querySelector(".button-container button").addEventListener("click", () => {
modal.showModal();
});
const closeBtns = document.getElementsByClassName("close");
for (btn of closeBtns) {
btn.addEventListener("click", () => {
modal.close();
})
}Mã này sử dụng phương thức querySelector để lấy tham chiếu đến các nút và hộp thoại. Sau đó, nó đính kèm một trình nghe sự kiện nhấp chuột vào mỗi nút.
Bạn có thể quen thuộc với trình xử lý sự kiện trong JavaScript, mà bạn có thể tự sử dụng. Trình nghe sự kiện gắn với nút xóa gọi phương thức showModal () để hiển thị hộp thoại khi nút được nhấp.
Mỗi nút bên trong phương thức có một trình xử lý sự kiện được gắn vào nó, sử dụng phương thức close () để ẩn hộp thoại khi chúng được nhấp vào.
Ngay cả khi không có JavaScript nào gọi phương thức close () trong mã, người dùng cũng có thể đóng phương thức bằng cách nhấn phím thoát trên bàn phím của họ.
Bây giờ JavaScript này đã có sẵn, nếu người dùng nhấp vào nút xóa, phương thức sẽ mở và nhấp vào nút có hoặc không sẽ đóng phương thức.
Đây là những gì phương thức đã mở sẽ trông như thế này:
Một điều lưu ý là phần tử hộp thoại đã đi kèm với một số kiểu, mặc dù không có CSS trong index.html. Phương thức đã được căn giữa, nó có đường viền, chiều rộng được giới hạn cho nội dung và nó có một số phần đệm mặc định.
Người dùng không thể tương tác (nhấp, chọn) với bất kỳ thứ gì trong nền khi phương thức đang mở.
Phần tử hộp thoại cũng có thể tự hiển thị như một phần của luồng trang thay vì dưới dạng một phương thức. Để dùng thử, hãy thay đổi trình xử lý sự kiện đầu tiên trong JavaScript như sau:
document.querySelector(".button-container button").addEventListener("click", () => { modal.show(); });
Điều duy nhất đã thay đổi trong mã này là mã đang gọi phương thức show (), thay vì phương thức showModal (). Bây giờ, khi người dùng nhấp vào nút xóa mục, phương thức sẽ mở nội tuyến như sau:
4. Thêm kiểu dáng
Tiếp theo, tùy chỉnh giao diện của hộp thoại và nền của nó bằng cách viết CSS.
CSS sẽ giảm đường viền của hộp thoại, giới hạn chiều rộng tối đa của nó, sau đó làm tối nền, cũng như thêm một chút kiểu dáng cho các nút.
Việc tạo kiểu cho hộp thoại là đơn giản, nhưng lớp giả phông nền là cần thiết để thêm kiểu nhắm mục tiêu đến nền của hộp thoại.
Dán mã sau vào thẻ kiểu của index.html:
dialog::backdrop {
background: black;
opacity: 0.5;
}
button {
border-radius: 2px;
background-color: white;
border: 1px solid black;
margin: 5px;
box-shadow: 1px 1px 2px grey;
}
dialog {
max-width: 90vw;
border: 1px solid black;
}
Khi hộp thoại được mở, bây giờ nó sẽ giống như sau:
Và bạn đã xây dựng một hộp thoại đầy đủ chức năng.
Phần tử hộp thoại là một cách tuyệt vời để xây dựng phương thức
Sử dụng phần tử hộp thoại HTML gần đây đã được hỗ trợ trong tất cả các trình duyệt chính, các nhà phát triển web giờ đây có thể xây dựng các hộp thoại và phương thức đầy đủ chức năng, có thể tùy chỉnh dễ dàng với một thẻ HTML và một vài dòng JavaScript và không cần dựa vào giải pháp của bên thứ ba.
Phần tử hộp thoại có một polyfill do nhóm Google Chrome duy trì, cho phép các nhà phát triển sử dụng hộp thoại trong các phiên bản trình duyệt không hỗ trợ nó.