## HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Popup Lightbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Danh sách các hình ảnh hiển thị trên trang -->
<div class="image-gallery">
<div class="gallery-item">
<img src="1.jpg" alt="máy giặt bong bóng" class="popup-trigger"
data-title-vi="máy giặt bong bóng"
data-date="May 19,2021"
data-title-en="Bubble Washing Machine"
data-desc="The bubbling cleaning machine is designed for materials with high shape requirements. It is...">
<p>máy giặt bong bóng</p>
</div>
<div class="gallery-item">
<img src="2.jpg" alt="máy chiết rót nước sốt" class="popup-trigger"
data-title-vi="máy chiết rót nước sốt"
data-date="June 10,2022"
data-title-en="Sauce Filling Machine"
data-desc="Description for sauce filling machine goes here...">
<p>máy chiết rót nước sốt</p>
</div>
<!-- Thêm các hình ảnh khác tại đây -->
</div>
<!-- Cấu trúc MODAL POPUP (Giống như trong ảnh z7975352149535_20ea4773eb8dace4aa835ec268dc0eab.jpg) -->
<div id="lightboxModal" class="modal">
<!-- Nút đóng góc trên bên phải bên ngoài hoặc sát mép -->
<span class="close-btn">×</span>
<div class="modal-content">
<!-- Phần Header của Popup -->
<div class="modal-header">
<h3 id="modalTitleVi">máy giặt bong bóng</h3>
<span id="modalDate">May 19,2021</span>
</div>
<!-- Phần Thân chứa Ảnh và Nút chuyển đổi -->
<div class="modal-body">
<button class="nav-btn prev-btn">❮</button>
<div class="image-container">
<img id="modalImage" src="" alt="Popup Image">
</div>
<button class="nav-btn next-btn">❯</button>
</div>
<!-- Phần Footer chứa Mô tả -->
<div class="modal-footer">
<h4 id="modalTitleEn">Bubble Washing Machine</h4>
<div class="desc-scroll">
<p id="modalDesc">The bubbling cleaning machine is designed for materials with high shape requirements. It is...</p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
<style type="text/css">
/* Gallery ngoài trang */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.image-gallery {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.gallery-item {
background: #fff;
padding: 10px;
border: 1px solid #ddd;
text-align: center;
cursor: pointer;
width: 200px;
}
.gallery-item img {
width: 100%;
height: auto;
}
/* MODAL BACKGROUND */
.modal {
display: none; /* Ẩn mặc định */
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* Nền tối mờ phía sau */
justify-content: center;
align-items: center;
}
/* NÚT ĐÓNG (X) */
.close-btn {
position: absolute;
top: 20px;
right: 30px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
background: rgba(0,0,0,0.3);
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.close-btn:hover {
background: rgba(0,0,0,0.6);
}
/* KHUNG POPUP CHÍNH */
.modal-content {
background-color: #fff;
width: 90%;
max-width: 800px;
border-radius: 4px;
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* HEADER POPUP */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
margin: 0;
font-size: 16px;
color: #333;
font-weight: bold;
}
.modal-header span {
font-size: 13px;
color: #888;
}
/* THÂN POPUP CHỨA ẢNH VÀ DI CHUYỂN */
.modal-body {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 10px 0;
background: #fff;
}
.image-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 400px; /* Chiều cao cố định cho vùng chứa ảnh */
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* NÚT NEXT / PREV TRÁI PHẢI */
.nav-btn {
background: rgba(0, 0, 0, 0.4);
color: white;
border: none;
padding: 15px 12px;
cursor: pointer;
font-size: 20px;
position: absolute;
z-index: 10;
transition: 0.2s;
}
.nav-btn:hover {
background: rgba(0, 0, 0, 0.7);
}
.prev-btn { left: 0; border-radius: 0 4px 4px 0; }
.next-btn { right: 0; border-radius: 4px 0 0 4px; }
/* FOOTER POPUP CHỨA MÔ TẢ */
.modal-footer {
padding: 20px 25px;
border-top: 1px solid #eee;
background: #fff;
}
.modal-footer h4 {
margin: 0 0 10px 0;
font-size: 16px;
color: #444;
}
/* Tạo thanh cuộn cho nội dung dài giống hình ảnh mẫu */
.desc-scroll {
max-height: 80px;
overflow-y: auto;
padding-right: 10px;
}
.desc-scroll p {
margin: 0;
font-size: 13px;
color: #666;
line-height: 1.5;
}
/* Tùy biến thanh cuộn đẹp hơn */
.desc-scroll::-webkit-scrollbar {
width: 6px;
}
.desc-scroll::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
const modal = document.getElementById("lightboxModal");
const triggers = document.querySelectorAll(".popup-trigger");
const closeBtn = document.querySelector(".close-btn");
const modalImg = document.getElementById("modalImage");
const modalTitleVi = document.getElementById("modalTitleVi");
const modalDate = document.getElementById("modalDate");
const modalTitleEn = document.getElementById("modalTitleEn");
const modalDesc = document.getElementById("modalDesc");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
let currentIndex = 0;
// Hàm cập nhật nội dung cho Modal dựa trên Index của ảnh
function updateModal(index) {
const targetImg = triggers[index];
modalImg.src = targetImg.src;
modalTitleVi.textContent = targetImg.getAttribute("data-title-vi");
modalDate.textContent = targetImg.getAttribute("data-date");
modalTitleEn.textContent = targetImg.getAttribute("data-title-en");
modalDesc.textContent = targetImg.getAttribute("data-desc");
currentIndex = index;
}
// Lắng nghe sự kiện click vào từng bức ảnh
triggers.forEach((trigger, index) => {
trigger.addEventListener("click", function () {
modal.style.display = "flex";
updateModal(index);
});
});
// Nút quay lại (Trái)
prevBtn.addEventListener("click", function (e) {
e.stopPropagation(); // Tránh lỗi tắt modal ngoài ý muốn
let newIndex = currentIndex - 1;
if (newIndex < 0) {
newIndex = triggers.length - 1; // Quay về ảnh cuối cùng nếu vượt quá đầu danh sách
}
updateModal(newIndex);
});
// Nút kế tiếp (Phải)
nextBtn.addEventListener("click", function (e) {
e.stopPropagation();
let newIndex = currentIndex + 1;
if (newIndex >= triggers.length) {
newIndex = 0; // Quay về ảnh đầu tiên nếu vượt quá cuối danh sách
}
updateModal(newIndex);
});
// Đóng modal khi bấm nút X
closeBtn.addEventListener("click", function () {
modal.style.display = "none";
});
// Đóng modal khi click ra vùng ngoài khung trắng
modal.addEventListener("click", function (e) {
if (e.target === modal) {
modal.style.display = "none";
}
});
// Hỗ trợ bấm nút điều hướng bằng bàn phím (Trái/Phải/Esc)
document.addEventListener("keydown", function(e) {
if (modal.style.display === "flex") {
if (e.key === "ArrowLeft") {
prevBtn.click();
} else if (e.key === "ArrowRight") {
nextBtn.click();
} else if (e.key === "Escape") {
modal.style.display = "none";
}
}
});
});
</script>
</body>
</html>
## Demo
## Demo
Link: https://vietb2b.com/nha-cung-cap-6-profile
Không có nhận xét nào:
Đăng nhận xét