Trong bài viết này, chúng ta sẽ cùng khám phá cách tạo ra những Modal Window - một tính năng quan trọng và phổ biến trên các website hiện đại.
Modal Window không chỉ giúp hiển thị nội dung bổ sung một cách tinh tế mà còn tăng trải nghiệm người dùng (UX/UI) bằng cách giữ người dùng ở trong cùng một trang web mà không cần phải chuyển trang.
Tham khảo Thêm Nội Dung Liên Quan - 150++ Tính Năng Thiết Kế Website Bằng HTML, Designer Nên Biết. : Xem Tại Đây
Dưới đây là ba mẫu code HTML/CSS/JavaScript giúp bạn nhanh chóng triển khai tính năng này trên website của mình.
3 HTML Mẫu Modal Window :
Mẫu 1: Nút Modal Window Tích Hợp Vào Fixed Navigation Bar
Trong mẫu này, nút để mở Modal Window sẽ được tích hợp vào một thanh điều hướng cố định ở phía trên trang web.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
padding: 14px 20px;
z-index: 10;
}
.navbar button {
background-color: #04AA6D;
color: white;
border: none;
padding: 10px;
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-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="navbar">
<button id="openModalBtn">Mở Modal</button>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Nội dung Modal Window từ thanh điều hướng cố định.</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
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";
}
}
</script>
</body>
</html>
Điểm nổi bật: Nút mở Modal Window tích hợp gọn gàng trong thanh điều hướng cố định giúp người dùng truy cập nhanh chóng từ bất kỳ vị trí nào trên trang web.
Mẫu 2: Nút Modal Window Bám Lề Bên Phải
Mẫu này đặt nút mở Modal Window bám sát lề bên phải của trang web, luôn hiển thị khi người dùng cuộn trang.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}
.side-button {
position: fixed;
right: 10px;
top: 50%;
transform: translateY(-50%);
background-color: #04AA6D;
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10;
}
.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-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="side-button" id="openModalBtn">Mở Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Nội dung Modal Window từ nút bám lề bên phải.</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
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";
}
}
</script>
</body>
</html>
Điểm nổi bật: Nút bám lề bên phải luôn hiển thị, dễ dàng truy cập và phù hợp với các trang có nội dung dài.
Mẫu 3: Nút Modal Window Tích Hợp Vào Sticky Cố Định Chân Trang
Ở mẫu này, nút mở Modal Window được tích hợp vào một thanh sticky cố định ở chân trang.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding-bottom: 60px;
}
.footer-sticky {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
z-index: 10;
}
.footer-sticky button {
background-color: #04AA6D;
color: white;
border: none;
padding: 10px;
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-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="footer-sticky">
<button id="openModalBtn">Mở Modal</button>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Nội dung Modal Window từ thanh sticky cố định chân trang.</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
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";
}
}
</script>
</body>
</html>
Điểm nổi bật: Nút tích hợp vào thanh sticky cố định ở chân trang luôn hiển thị, giúp người dùng dễ dàng truy cập ngay cả khi họ đã cuộn đến cuối trang.
Các mẫu code này sẽ giúp bạn dễ dàng tạo ra Modal Window với các vị trí nút phù hợp với thiết kế và yêu cầu của website, cải thiện trải nghiệm người dùng và hiệu suất SEO.
Từ Khóa LSI Đề Xuất:
- Cửa sổ pop-up
- Tính năng giao diện người dùng (UI)
- Tương tác người dùng (UX)
- Thiết kế website responsive
- Hiển thị nội dung động
- JavaScript nâng cao
- Kỹ thuật lập trình web
Hy vọng với ba mẫu code trên, bạn sẽ dễ dàng triển khai tính năng Modal Window trên website của mình, đồng thời tăng cường trải nghiệm người dùng và cải thiện hiệu suất SEO.
