Hướng dẫn dùng popup.js JavaScript

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.

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

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

//codepen.io/pen/

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

 Liên hệ 


×
Bạn cần tư vấn hãy liên hệ với chúng tôi

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

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. title = function[]{
modal.style.display = "block"
}
// Đóng popup khi ấn vào nút đóng
closeBtn. title = 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. title = function[e]{
if[e.target == modal]{
modal.style.display = "none"
}
}

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. title, closeBtn. title và window. title

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ó.