📢 Trong thời gian chờ đợi thì mn dùng tạm code dưới đây nhé 😅
Bước 1: Chèn onload="thongbaopopup()" vào trong thẻ mở <body>, ví dụ:
<body onload="thongbaopopup()">
Bước 2: Chèn code dưới đây trước thẻ </body>
<style>
.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>
<!-- Thong bao pupup -->
<div class="tbpopup" id="tbpopup-1">
<div class="tboverlay"></div>
<div class="tbcontent">
<div class="tbclose-btn" onclick="thongbaopopup()">×</div>
<div style="font-size:30px;font-weight:bold">Xin chào</div>
<p>Cảm ơn bạn đã ghé thăm trang web của mình, chúc bạn một ngày mới vui vẽ và tràn đầy hạnh phúc!</p>
</div>
</div>
<!-- js thong bao popup -->
<script>
function thongbaopopup() {
document.getElementById("tbpopup-1").classList.toggle("active");
}
</script>
Bước 3: Lưu lại!
Chúc các bạn thành công!
