• kimidev

    Nhà phát triển cốt lõi
    Level 57
  • Bài viết #1
  • Đã chỉnh sửa

Do nhiều bạn yêu cầu nên hôm nay mình viết bài share luôn 😅

📌 Xem chi tiết tại đây: https://www.kimidev.ga/2021/12/share-code-tao-popup-cho-website-blogger.html

Chúc các bạn thành công 🎉

  • Lê Anh Đức đã trả lời bài viết này.
  • Lê Anh Đức đã thích điều này.

  • 📢 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()">&times;</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!

    📢 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()">&times;</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!

      ầu shit cái code của anh kimi nãy thêm nhầm web kia hèn gì k được =))))