Hướng dẫn popup html là gì

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

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ệ

 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

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