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ệ
<button id="popup-btn"> Liên hệ </button> <div class="popup"> <div class="popup-content"> <span class="close-btn">×</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. 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" } } </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. 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ó.