[Script] Code hiển thị Popup (Chỉ hoạt động 1 lần duy nhất) hỗ trợ giao diện trên Mobile

Share code tạo popup hiển thị 1 lần trên Website BLogspot, Wordpress, Website tự code

Bạn có 1 sự kiện cần hiển thị Popup trên trang chủ hay trên toàn website. Trên mạng có khá nhiều đoạn script chia sẻ về cách làm này nhưng rất nhiều cái lỗi do jquery hiện tại đã được nâng cấp khiến chúng tôi hoặc không hiển thị tốt trên bản mobile.

Share code tạo popup hiển thị 1 lần trên Website BLogspot, WordPress, Website tự code
Share code tạo popup hiển thị 1 lần trên Website BLogspot, WordPress, Website tự code

Đoạn script Tú chia sẻ dưới đây được chỉnh sửa bởi Coder tại Sudo hiển thị tốt và cách cài đặt đơn giản, không phụ thuộc vào thư viện bởi chỉ sử dụng các hàm cơ bản, việc duy nhất bạn cần làm là thay link ảnh, thay đường dẫn và dán nó vào phần header của website mỗi khi bạn muốn chúng hoạt động.

Bạn có thể sử dụng đoạn code này ở bất kỳ đâu, bất cứ nền tảng nào….

Có 2 trường bạn cần quan tâm

  • link_image : Bạn sẽ nhập link hình ảnh vào đây, do là popup nên ảnh phải tách nền, đuôi file là .png thì mới hiển thị đẹp
  • link: là trang đích khi người dùng click vào hình ảnh này họ sẽ được dẫn tới.

[codesyntax lang=”php”]

<script>
        var link_image = 'Sudo Link hinh anh';
        var link = 'Sudo Link trang dich';
        var icon_close = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABjUExURQAAAHoqKJETEsAWFYwNDZQICYMlI0dFQdkREXcuK9QSEoMcG5gbGoYSEpYYGNcSEZkaGYsREcgVFagWFZgICNITEskSEtsREHIuLMEZGMAaGYYSEr0bGscZGM8VFH8SEqQWFrMI1wgAAAAadFJOUwBFwNP+/iYE/Q85l3jxWLE33aii6n1a4W/rvkm7xQAABJlJREFUaN61mueaqyAQhlFRwJpo1EQs5/6v8qBrpShY5nn2z+4mb4YpfDMGgDOG0N+P1GL3DW6wPYZnQ/pG4BZDRPZLAL4upDQEN0Gkv+vdoNQGjxnDBrS3DwHoMQZ5DwzoPcZgSQUHhvt6hjG8aTAwOtd7LBiA2H9+fJ45q6FeLHdAdJ9n/BgYgS5jr1EcvMxeGMi4uPQY3luXwewVpkmWJWkW+iZEC44M95BBcqfCTd3gqm7a5pcWRJMx9KqBcVgfOa6rtTVV7eQ6/gQzwz9geGW7ZQycps78I8ZYHbSD8dGpYgmjGs7NifdSYmxWPeOouXutlDFyfl8kx7C+Ho0MesgAiZIxcNoyljNeCyM7Yvi7jMEcX8KI6cw4vqSKQwbLtUzoF+HMoO/jdI+bQ0gfmz6hkZSh09w9XGlYXZW+3A/X0qnZpKn0LJs9iVcMPWXiNa0epMXjh46jhRFo9lGvbOpK78zS3plwYcA30e7XOW71MM3vNeqeP4bRjU5CR4tTV9jpVgH5Gl4/Lz1O868zDQiXAt8Et/oQeFaOEivFu2mwQLrogjTZ56wgxTWdQ6xExZkhXQYuGwpLKWeCdJ97lOIrw0xXKCDsvr1Jj7LyaTl3Zoh9oyL1U1XgP68b1a7vKOoksm6kgMJZQrOCdLC4DdHLcEfaVigNzql0uRZt5JDOzW7zxWoVkL9xGpmey6H64yHQbLhSMYizvgF4CEsykzFR9Z/ZRvGLEAqvp3K8nSokEEqvthhOltWtE4kU95ovpOS6SklQ5lKBc2kNwSs/HA4rrXG+WsmWC77kXA9unT9JbAlnBk+3S2GsaOMp1UOXg8BTrR8Bwo2rVZ0uJTVtUxaMd4YBEuH69dZ/jq/7gkDOM+p8u4IkmcvXvinDFxiYrB0hq5WH/szFmdPwI2ohrG034xBr/bZhtYS8YG1K6Tt4n1UCQDOKhfkBDKuWDsGKEhlpcIdP31Ytr5eJnmmYUD/qIRZU3U7jQMEc/ygKdRniSDzVoep0Z2eiT6wJESfi+mBjtDSA6K3TLAkoBKldJxqrr9kXT4MBSrEOfY2EnI4sso+29ayQxXVLm2rdom84UcARg/yEiGBLr6UGWuXSN6SvkFpYewSNx8DAYF97SRxp9C9X773IZKXHsjqsHRMtatNpFNuhlOKkWBhpkTGXlX2f3UW5uOsoTZ4foXlzmCk2pGQ9isz5m5uKKmuQTPCryi1fnKqx2a2K0PR4C8okX59bgZi/pmua/o3R0MpkYVHkr7ls6z+trcpjxGv4Puy/MyqXvSZjvrii3mdxT8WQ5Gen2f5aFicklqk/sf+eFLmDLx2bKRFPt6pz/VfVL6EsjyW98QsuWEo7/kkwApm4Hby2p7Eht6hkx+WcuHYPpBXtXpxIERhVfnHmJDZ1uKFHzK3rz3IdbtSz2ttya+VL4HEC+Grf0lhCCMdV+eCGVeP2Hby6uXDvai5tED/4pHcw+H6/HUVP9639xVAorgbut216tSF4xDbn9SPPQIrmxr6lHn9Wl3sBHrJVPZbPfVunmGKPX+A5G0agWj2232Ne8qt/yZ3fpfkPLjkNSsPf3E8AAAAASUVORK5CYII=';
        function closePopupBeta(){document.getElementById("popup_banner_beta").remove(),setCookie("showPopupBannerBeta",1,1)}function setCookie(e,n,o){var t="";if(o){var i=new Date;i.setTime(i.getTime()+24*60*60*1000),t="; expires="+i.toUTCString()}document.cookie=e+"="+(n||"")+t+"; path=/"}function getCookie(e){for(var n=e+"=",o=document.cookie.split(";"),t=0;t<o.length;t++){for(var i=o[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(n))return i.substring(n.length,i.length)}return null}1!=getCookie("showPopupBannerBeta")&&(document.addEventListener("DOMContentLoaded", function(event) { var e='<div id="popup_banner_beta"><div onclick="closePopupBeta()" class="mask_popup_banner_beta"></div><div class="content_popup_banner_beta"><img src="'+icon_close+'" class="close_icon" onclick="closePopupBeta()" alt="Close Image"><a href="'+link+'"><img src="'+link_image+'" alt="Image Popup Banner"/></a></div></div>';setTimeout(function(){document.body.innerHTML+=e},3000)}));
    </script>
    <style>
        #popup_banner_beta{position:fixed;width:100%;height:100vh;z-index:99999;top:0;left:0}.mask_popup_banner_beta{background:rgba(0,0,0,.38);cursor:pointer;position:absolute;width:100%;height:100vh;top:0;z-index:9;left:0}.content_popup_banner_beta{position:absolute;top:50%;left:50%;z-index:10;transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.close_icon{position:absolute;top:-70px;right:-60px;width:70px;cursor:pointer}@media only screen and (max-width:480px){.content_popup_banner_beta{width:300px}.content_popup_banner_beta a img:nth-of-type(1){width:100%}.close_icon{top:-60px;right:-20px;width:50px}}
    </style>

[/codesyntax]

Vị trí gắn, hãy gắn vào bên trong thẻ <header> của website. (Tham khảo HTML cơ bản cho SEO nếu bạn không biết header là gì).

Chúc bạn thành công!

Author: Tú Cao

Tôi là Tú Cao. Tôi chia sẻ và dạy mọi người cách kinh doanh trên Internet. Bởi vì "Hạnh phúc không phải là nhận, hạnh phúc chính là sự cho đi". Bài viết này dựa trên quan điểm, hiểu biết của Tôi. Bạn tự cân nhắc và chịu trách nhiệm khi làm theo, nếu nó hữu ích với bạn hãy Mời Tú Cao một tách CÀ PHÊ.  

21 Replies to “[Script] Code hiển thị Popup (Chỉ hoạt động 1 lần duy nhất) hỗ trợ giao diện trên Mobile”

  1. Vương Đình says: 19/07/2021 at 10:36

    a ơi, e muốn hiển thị tất cả các trang thì làm thế nào ạ

    1. Tú Cao says: 21/07/2021 at 11:12

      Em gắn code vào phần nó hiển thị ở trang nào thì trang đó sẽ có nhé.

  2. huynh says: 06/09/2020 at 20:23

    popup này gán điền form thông tin dk ko anh?

    1. Tú Cao says: 21/07/2021 at 11:12

      Không có em nhé, nó chỉ là cái ảnh thôi.

  3. it269 says: 11/08/2020 at 09:52

    Rất hay và cảm ơn bạn đã chia sẻ code đơn giản load nhanh

  4. Thuy Tran says: 04/12/2019 at 13:27

    Bài viết ngắn gọn, dễ hiểu và cũng dễ làm. Mình có chỉnh được thời gian popup xuất hiện khi khách vào web tầm 20s-30s để được không Tú?. Chúc Tú sức khỏe, thành công nhé!

  5. Duyen says: 02/12/2019 at 00:32

    Cho em hỏi em có cài pop up điền form mà trên giao diện mobile nó bị co lộn xộn em phải làm sao ạ?

    1. Tú Cao says: 02/12/2019 at 13:03

      Chắc bị xung đột, bạn coi lại xem đã đặt đúng chưa, hoặc tìm code khác.

  6. Trung Nguyen says: 16/10/2019 at 10:57

    Chào bạn.
    Không biết chỉnh chổ nào trong phần setCookie để có thể quy định thời gian hiển thị lại popup không nhỉ? Ví dụ sau khi nhấn Close thì 5 phút sau sẽ hiển thị lại popup lần nữa.
    Chứ tắt rồi tắt luôn sau 24h thì không phù hợp.
    Xin cảm ơn.

    1. Tú Cao says: 03/11/2019 at 15:47

      Chào bạn, bạn có thể chỉnh phần này setTime(i.getTime()+24*60*60*1000)

      Trong đó 1000 là 1s.

  7. Tiều Ka Ka says: 13/11/2018 at 16:56

    Không có demo à anh

    1. Tú Cao says: 02/12/2018 at 11:37

      Demo là cái hình luôn, ảnh do bạn đưa vào. Cái này đơn giản mà

    2. Tú Cao says: 12/01/2019 at 08:30

      Cái này là 1 đoạn code đơn giản, cài vào là hiển thị nên mình không làm demo.

  8. Ryan Pham says: 13/11/2018 at 11:28

    chào anh, có cách nào chỉnh thời gian xuất hiện popup ngắn được không??/

  9. ryan says: 13/11/2018 at 11:25

    Anh cho em hỏi ?
    code popup trên mình muốn có xuất hiện nhiều lần hoặc, cho popup xuất hiện khi tắt popup được 15 phút rồi xuất hiện lại như thế nào vậy?

    1. Tú Cao says: 02/12/2018 at 11:36

      Cái này chỉ xuất hiện 1 ngày 1 lần thôi, xuất hiện nhiều phiề người dùng lắm.

  10. trương gia says: 13/09/2018 at 14:29

    Em đang gặp phải trường hợp là link chính của em là https://domain/tin-tuc/post
    nhưng trên webmaster chỉ nhận https://domain/post, không biết phải giải quyết sao? xin hỏi anh ạ

    1. Tú Cao says: 13/09/2018 at 22:21

      Chắc bạn config sai ở đâu đó về link. hãy kiểm tra lại.

      1. Ryan Pham says: 13/11/2018 at 14:42

        Cho mình hỏi muốn cho thời gian popup xuất hiện lại thì phải làm sao vậy?

        1. Tú Cao says: 02/12/2018 at 11:36

          Bạn chỉnh cái này

          setTimeout(function(){document.body.innerHTML+=e},3000)}));

        2. Tú Cao says: 12/01/2019 at 08:32

          Bạn có thể thay đổi số 3000 thành lớn hơn nhé.

Trả lời

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*