Cách Làm Modal Box Đơn Giản
Tìm hiểu cách tạo Modal Box bằng CSS và JavaScript.
Modal là một hộp thoại/cửa sổ bật lên được hiển thị ở đầu trang hiện
tại.
Tự tạo và tùy chỉnh các thành phần giao diện trên trang web là một phần quan
trọng của phát triển web. Trong bài viết này, chúng ta sẽ khám phá cách tạo
một "model box" hoàn chỉnh bằng sự kết hợp của HTML, CSS và JavaScript.
HTML sẽ giúp bạn xác định cấu trúc cơ bản của model box, bao gồm cả nội dung
bên trong. CSS sẽ là công cụ để bạn tạo kiểu cho hộp, tạo hiệu ứng chuyển
động và ánh sáng, làm cho nó nổi bật trên trang. Cuối cùng, JavaScript sẽ
giúp bạn thêm tính năng tương tác như mở, đóng hộp và xử lý dữ liệu từ người
dùng.
Dưới sự hướng dẫn cụ thể và ví dụ minh họa, bạn sẽ thấy cách sáng tạo và tùy
chỉnh model box theo ý muốn, từ việc thay đổi màu sắc và kiểu chữ cho đến
thêm hiệu ứng động cuốn hút. Với kiến thức này, bạn sẽ có khả năng tạo ra
các giao diện tương tác ấn tượng trên trang web của mình.
Hãy cùng bắt đầu hành trình khám phá cách tạo model box độc đáo cho trang
web của bạn bằng cách kết hợp HTML, CSS và JavaScript!
Bước 1: Thêm HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal Tutorials</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<button id="myBtn" class="myBtn">Open Modal</button>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
Bước 2: Thêm CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.myBtn {
padding: 16px 32px;
border-radius: 16px;
background-color: #5cb85c;
color: white;
font-size: 18px;
outline: none;
border: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-header {
padding: 16px 32px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 16px 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
top: 50%;
transform: translateY(-50%);
border: 1px solid #888;
width: 60%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
animation-name: animateTop;
animation-duration: 0.4s;
}
.modal-footer {
padding: 16px 32px;
background-color: #5cb85c;
color: white;
}
.close {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@keyframes animateTop {
from {
top: 30%;
opacity: 0;
}
to {
top: 50%;
transform: translateY(-50%);
opacity: 1;
}
}
Bước 3: Thêm Javascript
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
};
span.onclick = function () {
modal.style.display = "none";
};
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
Full tutorial:
Kết luận
Trong bài viết này, chúng ta đã cùng nhau khám phá quy trình tạo một "model
box" đẹp mắt bằng HTML, CSS và JavaScript. Chúng ta đã bước qua từng bước từ
việc xây dựng cấu trúc cơ bản của hộp, tới việc tạo kiểu cho nó và cuối cùng
là thêm các tính năng tương tác động. Qua việc tìm hiểu và áp dụng, bạn có
thể biết cách tùy chỉnh mọi khía cạnh của hộp, từ màu sắc cho đến hiệu ứng
chuyển động.
Việc tạo ra các thành phần giao diện tương tác như model box không chỉ giúp
trang web của bạn trở nên hấp dẫn hơn, mà còn nâng cao trải nghiệm người
dùng. Điều quan trọng là bạn có sự linh hoạt và kiến thức cơ bản về HTML,
CSS và JavaScript để tạo ra những hiệu ứng và tính năng độc đáo theo ý muốn.
Hy vọng rằng với kiến thức từ bài viết này, bạn sẽ tự tin hơn trong việc
thực hiện các dự án phát triển web của mình. Đừng ngần ngại thử nghiệm và
tạo ra những giao diện độc đáo để tạo ấn tượng với khán giả của bạn. Cảm ơn
bạn đã đồng hành cùng chúng tôi trong hành trình này, và chúc mọi điều tốt
lành cho sự phát triển của bạn trong lĩnh vực phát triển web!
Các bài viết liên quan: