Show popup thông tin bằng Javascript

🗣 Bài viết đăng bởi Pinker vào lúc 16-03-2022 và cập nhật lúc 04-04-2022 👁 897 lượt xem
Show Popup Javascript

Mô tả

Khi click vào nút “REVIEW CHI TIẾT” thì hiển thị ra bài viết mà không bị chuyển link! Tình cờ tôi thấy được câu hỏi này trong 1 group Zalo. Cái cửa sổ mà show thông tin chi tiết, tôi sẽ gọi là Popup. Chức năng này chỉ cần làm bằng Javascript là có thể đáp ứng được. Bản chất của việc này là khi click vào “Review chi tiết” thì sẽ chuyển thuộc tính của Popup từ display:none sang display:block và khi click vào dấu “X” để tắt nó đi thì chuyển ngược lại từ display:block sang display:none.

Show Popup Thông Tin Không Chuyển Hướng Trang

Click Review Chi Tiết

Popup Show Thông Tin

 

Cách làm

Ok! Tôi sẽ code ra 1 trang demo ví dụ cho các bạn dễ hình dung, tôi sẽ sử dụng HTML, CSS, Javascript, bây giờ chúng ta sẽ tiến hành làm như sau:

Bước 1: Code HTML

Tạo các thành phần của trang bằng HTML. Tôi sẽ tạo 1 trang với các thành phần HTML cơ bản bằng các dòng code dưới đây, bao gồm có Button và Popup

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Show Hide Popup | vuduchong.com</title>
</head>
<body>
    <button onclick="openPopup()">REVIEW CHI TIẾT</button> <!-- Button mở popup -->
    <div id="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closePopup()">×</a> <!-- Button đóng popup -->

        <!-- Nội dung trong Popup -->
        <center>
            <div class="overlay-content">
                <h3>REVIEW KHÁCH SẠN ĐÀ NẴNG</h3>
                    <p>
                        Đà Nẵng luôn nổi danh là thành phố đáng sống nhất Việt Nam. Chính vì lẽ đó mà đây cũng trở thành một trong những địa điểm du lịch yêu thích. Không khó để có thể tìm được một nơi dừng chân chất lượng với sự mến khách của con người Đà Nẵng. Cùng Tico travel tìm hiểu top 20 khách sạn Đà Nẵng ngay nhé!
                    </p>
             </div>
        </center>
    </div>
</body>
</html>

 

Bước 2: Code CSS

CSS các thành phần trên cho đẹp mắt và để phục vụ chức năng cho hợp lý

body {
    height: 100vh;
    margin: 0;
    background: #0b3f67;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    background: #fa9600;
    border: none;
    border-radius: 5px;
    color: #0b3f67;
    padding: 10px;
    cursor: pointer;
    font-size: 30px;
}

#overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: #0b3f67f5;
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    color: white;
    position: relative;
    top: 25%;
    width: 50%;
    text-align: center;
    margin-top: 30px;
    font-family: Arial;
}

#overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    color: white;
    text-decoration: none;
}

 

Bước 3: Code Javascript show Popup

Đây là phần quan trọng nhất để điều khiển và tạo được tác vụ, javascript sẽ biến đổi thuộc tính display để show và hide popup như mong muốn

function openPopup() { // Click vào button thì gán style cho Popup là display:block để hiển thị lên
    document.getElementById("overlay").style.display = "block";
}

function closePopup() { // Click vào close thì gán style cho Popup là display:none để ẩn đi
    document.getElementById("overlay").style.display = "none";
}

 

Kết quả

Show Popup
 

Source code

Nếu bạn muốn mời tôi ly cafe ?

- Momo: 0986 209 305
- MB Bank: 080014.8886888 - Vũ Đức Hồng
- Mật khẩu (nếu có): vuduchong.com
5/5 - (1 bình chọn)

Bài viết khác

Tổng hợp Download Plugin - Theme cho WordPress : Xem ngay
Nhóm Zalo : Tham gia ngay
TAGS: CODE SHOW POPUP HTML CSS HOW TO CODE SHOW POPUP HTML CSS DISPLAY POPUP HTML CSS SHOW POPUP JAVASCRIPT EVENT CLICK JAVASCRIPT SHOW POPUP

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Hotline Zalo Giới thiệu
0986.209.305
Zalo
Giới thiệu