26 tháng 4 năm 2024 - Máy tính
Gần đây tôi muốn sử dụng CSS và JavaScript để tạo ra một hộp thoại nhỏ, sau khi tìm hiểu nhiều tài liệu và nắm được một số kiến thức, bài viết này sẽ trình bày chi tiết quá trình thực hiện một hộp thoại đơn giản.
Trong HTML, hộp thoại có thể được sử dụng cho mục đích thông báo, cảnh báo hoặc nhận đầu vào từ người dùng. Một số hộp thoại yêu cầu người dùng phải phản hồi, nếu không nhấn nút đóng thì hộp thoại sẽ tiếp tục hiển thị và ngăn chặn các thao tác khác. Hộp thoại minh họa trong bài viết này thuộc loại này.
Đầu tiên, hãy xem kết quả: !Ví dụ về hộp thoại [game nhà cái tặng tiền cược miễn 22win casino phí](/post/4075/) nhỏ
Hộp thoại này chủ yếu sử dụng HTML và CSS, kèm cách rút tiền fun88 wtf theo một chút JavaScript. Dưới đây là mã nguồn đầy đủ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hộp thoại</title>
<style>
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup-content {
background-color: #fff;
max-width: 400px;
margin: 100px auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<button id="popupButton">Mở hộp thoại</button>
<div id="popup" class="popup">
<div class="popup-content">
<span class="close" onclick="dongPopup()">×</span>
<h2>Đây là một hộp thoại</h2>
<p>Xin chào, đây là ví dụ về hộp thoại.</p>
</div>
</div>
<script>
const popup = document.getElementById("popup");
const popupButton = document.getElementById("popupButton");
popupButton.addEventListener("click", () => {
popup.style.display = "block";
});
function dongPopup() {
popup.style.display = "none";
}
</script>
</body>
</html>
Xem hiệu ứng trực tuyến Sau khi xem qua hiệu ứng và mã nguồn đầy đủ của hộp thoại này, dưới đây chúng ta sẽ phân tích sơ lược đoạn mã.
1 Phân tích đoạn mã
1.1 Phần CSS
.popup là lớp định dạng chính của hộp thoại, chịu trách nhiệm kiểm soát kiểu dáng nền của hộp thoại, mặc định là không hiển thị, khi kích hoạt sẽ hiển thị một nền màu xám tối phủ khắp trang. .popup-content là lớp định dạng nội dung hộp thoại, hiển thị ở phần giữa phía trên trang với hình dạng khung vuông bo góc nhỏ. .close là lớp định dạng nút đóng hộp thoại, biểu thị bằng ký tự X nằm ở góc trên bên phải của hộp thoại.
/* Kiểu dáng nền hộp thoại */
.popup {
display: none;
/* ... */
}
/* Kiểu dáng hộp thoại */
.popup-content {
/* ... */
}
/* Kiểu dáng nút đóng */
.close {
/* ... */
}
1.2 Phần HTML
Ban đầu, trang chỉ có một nút “Mở hộp thoại” ở góc trên bên trái, khối popup mặc định không hiển thị (display: none;). Khi nhấn nút này, JavaScript sẽ lắng nghe sự kiện click và thiết lập popup.style.display thành block, khiến hộp thoại xuất hiện (bao gồm nền hộp thoại, khung hộp thoại, nút đóng X, tiêu đề và một dòng chữ). Khi nhấn nút đóng, JavaScript sẽ thiết lập lại popup.style.display thành none, trả về trạng thái ban đầu.
<button id="popupButton">Mở hộp thoại</button>
<div id="popup" class="popup">
<div class="popup-content">
<span class="close" onclick="dongPopup()">×</span>
<h2>Đây là một hộp thoại</h2>
<p>Xin chào, đây là ví dụ về hộp thoại.</p>
</div>
</div>
1.3 Phần JavaScript
Phần này xử lý việc hiển thị hoặc ẩn hộp thoại khi nhấn nút “Mở hộp thoại” hoặc nút đóng.
const popup = document.getElementById("popup");
const popupButton = document.getElementById("popupButton");
popupButton.addEventListener("click", () => {
popup.style.display = "block";
});
function dongPopup() {
popup.style.display = "none";
}
2 Kết luận
Như vậy, bài viết đã trình bày cách sử dụng HTML, CSS và JavaScript để tạo một hộp thoại đơn giản cùng với các chi tiết thực hiện.
[1] GeeksforGeeks: Làm thế nào để tạo hộp thoại sử dụng HTML và CSS? -
#HTML #CSS #JavaScript