Việt Nam
Share code tạo popup cho blog/website
Nguyễn Hoàng Đạt anh chưa thử code này, em thử lại xem đã chèn đủ code chưa
Mình cũng mới run bên w3c không lên :V
Hà Trần Đức Trí để anh thử xem nào
Lê Anh Đức Ok luon anh vào xem như nào rồi bảo b ấy fix lại
Hà Trần Đức Trí ủa mà đổi link web chỗ script chưa Trí Nqu =)))
Nguyễn Hoàng Đạt chạy được thì sửa
Hà Trần Đức Trí hong được nè :')
Nguyễn Hoàng Đạt Đợi giáo sư sửa đã nào
- Câu trả lời hay nhấtchọn bởi Lê Anh Đức
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!
Lê Anh Đức hihi cảm ơn anh
Nguyễn Hoàng Đạt test thử xem được không em
ầu shit cái code của anh kimi nãy thêm nhầm web kia hèn gì k được =))))
Nguyễn Hoàng Đạt không còn gì để lói
Lê Anh Đức Đạt Nqu như @Hà Trần Đức Trí :')
alo mọi người. nếu ai dùng code của medium ui thì xin thông báo không dùng đc. phải code riêng để phù hợp với theme. (( code của medium ui nó lạ lắm. còn đối với những theme khác thì dùng đc nha
kimidev median không dùng https://jquery.com/ nên chắc không hoạt động
import https://code.jquery.com/jquery-3.6.0.min.js để khắc phục
Lê Anh Đức tại em ko dùng theme đó nên em ko biết đến là có sự tồn tại của cái này un í
Lê Anh Đức em ko thấy gì hết