Tạo popup cho website HTML bằng jQuery
Có nhiều cách khác nhau để tạo popup cho website HTML. Bạn có thể sử dụng Bootstrap, JavaScript nhưng cách mình thích nhất vẫn là jQuery. Dưới đây mình sẽ hướng dẫn bạn cách tạo một popup khi click chuột vào.
Đầu tiên mình sẽ chuẩn bị một tập tin HTML với cấu trúc như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Modal</title>
<style>
/* Mã CSS */
</style>
</head>
<body>
<button class="modal-toggle">Hiển thị Popup</button>
<div class="modal">
<div class="modal-overlay modal-toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<button class="modal-close modal-toggle">x</button>
<h2 class="modal-heading">Tiêu đề</h2>
</div>
<div class="modal-body">
<div class="modal-content">
<p>Phần nội dung</p>
</div>
</div>
</div>
</div>
</body>
</html>Tiếp đó mình phải CSS lại
.modal {
position: absolute;
z-index: 10000; /* 1 */
top: 0;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
}
.modal.is-visible {
visibility: visible;
}
.modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.5);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
}
.modal.is-visible .modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.modal-wrapper {
position: absolute;
z-index: 9999;
top: 6em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
}
.modal-transition {
transition: all 0.3s 0.12s;
transform: translateY(-10%);
opacity: 0;
}
.modal.is-visible .modal-transition {
transform: translateY(0);
opacity: 1;
}
.modal-header,
.modal-content {
padding: 1em;
}
.modal-header {
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
padding: 1em;
color: #aaa;
background: none;
border: 0;
}
.modal-close:hover {
color: #777;
}
.modal-heading {
font-size: 1.125em;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.modal-content > *:first-child {
margin-top: 0;
}
.modal-content > *:last-child {
margin-bottom: 0;
}Ban đầu dùng đoạn code visibility: hidden; để ẩn popup đi.
Sau đó sẽ thêm đoạn code jQuery vào trước thẻ </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.modal-toggle').on('click', function(e) {
e.preventDefault();
$('.modal').toggleClass('is-visible');
});
</script>Xong xuôi thử click chuột vào button xem nào!
Vậy là một popup đã hiện ra.
Mọi thứ hoạt động cũng khá tốt đấy chứ. Nhưng bạn có biết vì sao nó lại như vậy không?
Đó chính là jQuery đã làm điều đó. Nó lắng nghe sự kiện nhấp chuột sau đó dùng toggleClass để thêm class is-visible vào phần tử.
Tiếp đó đoạn mã
.modal.is-visible {
visibility: visible;
}Có nhiệm vụ thay thế
.modal {
visibility: hidden;
}Ban đầu.
Lời kết: Popup là chức năng không thể thiếu ở trên website. Thường gặp là các thông báo, đăng ký hay đăng nhập tài khoản vv… Qua bài viết này bạn thấy rằng để tạo nên một popup quá đơn giản. Tuy nhiên bạn còn nhiều cách viết khác nữa. Đây chỉ là cách để cho bạn tham khảo mà thôi.
