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

Tú Cao By Tú Cao May 31,2018 5 min read

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

  • Sudo link anh : 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
  • Sudo link trang dich: là trang đích khi người dùng click vào hình ảnh này họ sẽ được dẫn tới.
 var link_image = 'Sudo link 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';setTimeout(function(){document.body.innerHTML+=e},3000)}));   #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}} 

Vị trí gắn, hãy gắn vào bên trong thẻ 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!

Tú Cao
By Tú Cao Admin

"Hạnh phúc không phải là nhận, hạnh phúc chính là sự cho đi" - đây là lý do mình viết và xây dựng lên Blog này. Bài viết trên dự dựa trên quan điểm, hiểu biết của cá nhân của mình. Nó có thể đúng, cũng có thể sai tùy thời điểm, vì vậy bạn phải tự cân nhắc và chịu trách nhiệm khi làm theo. Nếu bạn thấy nội hữu ích với bạn, hãy Mời Tú Cao một tách CÀ PHÊ.

Previous Article LSI là gì? Ý nghĩa của LSI trong SEO vì sao lại cần nó

LSI là gì? Ý nghĩa của LSI trong SEO vì sao lại cần nó

Next Article

Managed WordPress Hosting là gì? Có khác biệt gì so với Hosting thông thường?

Managed WordPress Hosting là gì? Có khác biệt gì so với Hosting thông thường?
Viết bình luận
Thêm bình luận

23 Bình luận

M
minh

em muốn hiện cái đó mỗi khi reset lại web thì làm ntn ạ a

Trả lời
23:29 08/12/2021
Vương Đình

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

Trả lời
10:36 19/07/2021
H
huynh

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

Trả lời
20:23 06/09/2020
N
Trung Nguyen

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.

Trả lời
10:57 16/10/2019
D
Duyen

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 ạ?

Trả lời
00:32 02/12/2019

Theo dõi Tú Cao trên Youtube để xem video hướng dẫn mới nhất

Theo dõi Tú Cao trên Youtube để xem video hướng dẫn mới nhất

Giữ kết nối !

Theo dõi hoặc kết nối với tác giả trên mạng xã hội

Subcribe

Tài liệu SEO miễn phí Tài liệu hướng dẫn cơ bản và nâng cao theo tiêu chuẩn của Google. Đã được thực nghiệm qua các dự án bởi tác giả. Xem thêm