Popup (bật lên) là một trong những chức năng thường thấy ở hầu hết các website. Chẳng hạn như các trang web dịch vụ, bán hàng bạn sẽ thấy các Popup hiển thị Form liên hệ, đăng ký, đăng nhập vv… Thật may mắn khi các trình duyệt đều hỗ trợ ngôn ngữ JavaScript. Bài viết này bạn sẽ được hướng dẫn cách tạo một Popup bằng JavaScript khi click với code đơn giản.

Các bước tạo popup bằng Javascript

Để thực hành code bạn có thể sử dụng

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

https://codepen.io/pen/

Bước 1: Tạo một button liên hệ

<button id="popup-btn"> Liên hệ </button>
<div class="popup">
<div class="popup-content">
<span class="close-btn">&times;</span>
<p>Bạn cần tư vấn hãy liên hệ với chúng tôi</p>
</div>
</div>

Bước 2: Viết CSS

.popup {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
position: relative;
background-color: #FAFAFA;
padding: 15px;
margin: auto;
width: 70%;
}
.close-btn {
float: right;
color: #2E2E2E;
font-size: 25px;
font-weight: 700;
}
.close-btn:hover {
color: #D2D2D2;
}

Giải thích:

• Trước tiên cần phải ẩn nội dung bằng display: none

Bước 3: Thêm JavaScript để lắng nghe sự kiện click chuột

<script>
let modalBtn = document.getElementById("popup-btn");
let modal = document.querySelector(".popup");
let closeBtn = document.querySelector(".close-btn");
// Hiển thị popup khi nhấp chuột vào button
modalBtn.onclick = function(){
modal.style.display = "block"
}
// Đóng popup khi ấn vào nút đóng
closeBtn.onclick = function(){
modal.style.display = "none"
}
// Đóng khi nhấp chuột vào bất cứ khu vực nào trên màn hình
window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
</script>

Giải thích:

• document.getElementById(“popup-btn”): Dùng để lấy thông tin từ ID popup-btn
• document.querySelector(“.popup”): Phương thức này để trả về thành phần đầu tiên
• Tiếp theo chúng ta sẽ viết ra 3 function là modalBtn.onclick, closeBtn.onclick và window.onclick

Tạo Popup để bật lên một cửa sổ khá đơn giản phải không nào. JavaScript có ứng dụng khá rộng rãi khi dùng để tương tác với người dùng trên trình duyệt. Chắc chắn bạn sẽ làm được rất nhiều thứ khi làm chủ nó.