Khi truy cập vào một trang web, bạn có thể thấy một cửa sổ pop-up hiển thị thông báo JavaScript. Đôi khi đó chỉ là một thông báo nhỏ nhắn như “Chào mừng bạn đến với trang web của chúng tôi” hoặc “Hãy đăng ký để nhận thông tin mới nhất”. Những thông báo này không chỉ là cách để trang web chào đón người dùng mà còn có thể cung cấp thông tin quan trọng hoặc khuyến mãi hấp dẫn. Đôi khi, chúng cũng có thể làm phiền người dùng nếu hiển thị quá nhiều hoặc không được thiết lập một cách hợp lý. Tuy nhiên, pop-up thông báo JavaScript vẫn là một phần không thể thiếu trong trải nghiệm duyệt web của chúng ta. 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 toantuoity.com.
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ả.
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()">×</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()">×</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 |
