Code popup thông báo JavaScript khi truy cập vào website

Posted: 25 Tháng Tám, 2023 | Last update: 1 Tháng Mười, 2023

Code popup thông báo JavaScript khi truy cập vào website, học viết code tạo popup thông báo load mượt nhẹ nhàng cùng Toancr SEO.

Học viết Code popup thông báo JavaScript

Code popup thông báo JavaScript là một công cụ hữu ích để thông báo cho người dùng về các thông tin quan trọng. Nó có thể được sử dụng để thông báo lỗi, cảnh báo, hoặc cảm ơn người dùng. Code popup thông báo JavaScript có thể được tùy chỉnh để phù hợp với nhu cầu của người dùng. Nó cũng có thể được sử dụng để hiển thị các thông tin quan trọng như thời gian, ngày, địa điểm, v.v. Code popup thông báo JavaScript cũng có thể được sử dụng để hiển thị các thông tin quan trọng như thời gian, ngày, địa điểm, v.v. Nó cũng có thể được sử dụng để hiển thị các thông tin quan trọng như thời gian, ngày, địa điểm, v.v. Code popup JavaScript là một công cụ hữu ích để giúp người dùng có thể nhận được thông tin quan trọng một cách nhanh chóng và hiệu quả.

Code popup thông báo JavaScript khi truy cập vào website

Các bước viết code popup thông báo khi người dùng vào trang web

Những bước làm dưới đây áp dụng khi user click chuyển sang sẽ xuất hiện nhé!

Bước 1: Thêm onload=”thongbaopopup()”

=> Tìm để thẻ <body> và thêm như sau:

<body onload="thongbaopopup()">

Bước 2: Viết đoạn html xuất hiện nội dung theo nhu cầu

<div class="tbpopup" id="tbpopup-1">
    <div class="tboverlay" onclick="thongbaopopup()"></div>
    <div class="tbcontent">
        <div class="tbclose-btn" onclick="thongbaopopup()">&times;</div>
        <div style="font-size:30px;font-weight:bold">Toancr SEO</div>
        <p>Cảm ơn bạn đã ghé thăm website của tôi.</p>
    </div>
</div>

=>Đoạn này bạn có thể dán vào cuối footer hoặc widget và nhớ thay đổi nộ dung theo nhu cầu của bạn nhé!

Bước 3: Viết đoạn javascript hiển thị

<script>
    function thongbaopopup(){
    document.getElementById("tbpopup-1").classList.toggle("active");
    }
</script>

=> Dán đoạn này vào cuối footer nhé, cụ thể là thẻ đóng </footer>

Bước 4: Viết đoạn javascript set time tắt popup

<script>
function thongbaopopup() {
  var popup = document.getElementById("tbpopup-1");
  popup.classList.toggle("active");
  
  setTimeout(function(){
    popup.classList.toggle("active");
  },3000)
}
</script>

=> Nếu bạn muốn popup tự đóng thì hãy dán thêm đoạn mã trên nhé, 3000 là tắt popup sau 3 giây.

Bước 5: Thêm chút style để popup hiển thị mượt mà

<style>
/* Thong bao Popup  */
.tbpopup .tboverlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    z-index:1;
    display:none;
}
 
.tbpopup .tbcontent {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    max-width:500px;
    z-index:2;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
    font-family:"Open Sans",sans-serif;
    border-radius:20px;
    display: block;
    position: fixed;
    box-shadow:0px 0px 10px #111;
}
@media (max-width: 700px) {
    .tbpopup .tbcontent {width:90%;}
}
 
.tbpopup .tbclose-btn {
    cursor:pointer;
    position:absolute;
    right:20px;
    top:20px;
    width:35px;
    height:35px;
    color:#ff4444;
    font-size:30px;
    font-weight:600;
    line-height:35px;
    text-align:center;
    border-radius:50%;
}
 
.tbpopup.active .tboverlay {display:block;}
 
.tbpopup.active .tbcontent {
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);
}
.tbbuttom{background:#00cc00;color:#fff}
</style>

=> Dán tiếp đoạn mã này vào dưới nhé đoạn javascript

Tóm tắt nội dung bài học viết Code popup

<div class="tbpopup" id="tbpopup-1">
    <div class="tboverlay" onclick="thongbaopopup()"></div>
    <div class="tbcontent">
        <div class="tbclose-btn" onclick="thongbaopopup()">&times;</div>
        <div style="font-size:30px;font-weight:bold">Toancr SEO</div>
        <p>Cảm ơn bạn đã ghé thăm website của tôi.</p>
    </div>
</div>

<script>
    function thongbaopopup(){
    document.getElementById("tbpopup-1").classList.toggle("active");
    }
</script>

<script>
function thongbaopopup() {
  var popup = document.getElementById("tbpopup-1");
  popup.classList.toggle("active");
  
  setTimeout(function(){
    popup.classList.toggle("active");
  },3000)
}
</script>

<style>
/* Thong bao Popup  */
.tbpopup .tboverlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    z-index:1;
    display:none;
}
 
.tbpopup .tbcontent {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    max-width:500px;
    z-index:2;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
    font-family:"Open Sans",sans-serif;
    border-radius:20px;
    display: block;
    position: fixed;
    box-shadow:0px 0px 10px #111;
}
@media (max-width: 700px) {
    .tbpopup .tbcontent {width:90%;}
}
 
.tbpopup .tbclose-btn {
    cursor:pointer;
    position:absolute;
    right:20px;
    top:20px;
    width:35px;
    height:35px;
    color:#ff4444;
    font-size:30px;
    font-weight:600;
    line-height:35px;
    text-align:center;
    border-radius:50%;
}
 
.tbpopup.active .tboverlay {display:block;}
 
.tbpopup.active .tbcontent {
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);
}
.tbbuttom{background:#00cc00;color:#fff}
</style>

Tìm kiếm có liên quan

Code popup xuất hiện 1 lần Hiển thị thông báo trong JavaScript
Popup thông báo HTML Tạo thông báo đẩy cho website PHP
Javascript hiển thị popup Tạo popup đăng nhập
Hiển thị thông báo trong jsp Lệnh in ra màn hình trong Javascript
Author:
Chuyên mục: Học viết code