Hướng dẫn tạo popup bằng 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 đơn giản nhất.

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");
modalBtn.onclick = function(){
modal.style.display = "block"
}
closeBtn.onclick = function(){
modal.style.display = "none"
}
window.onclick = function(e){
if(e.target == popup){
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ó.

Chuyên mục:

Hãy để lại bình luận:

Mình rất vui khi bạn đã để lại một bình luận. Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *