Hướng dẫn làm popup nhanh chóng không cần cài thêm plugin

Kiến thức - Kinh nghiệm

Hướng dẫn làm popup nhanh chóng không cần cài thêm plugin

Posted on Tháng Mười Hai 12, 2020Tháng Hai 2, 2021 by Trương Đại Phong

Hôm nay topweb.store sẽ hướng dẫ các bạn làm popup nhanh chóng không cần cài thêm plugin.

Để làm được điều này, các bạn chỉ cần copy đoạn code sau vào <head> trong file header.php của theme.

<script >

var link_image = ‘URL hinh_anh_popup’;
var link = ‘URL duong_dan_dich_cua_popup’;
var icon_close = ‘data: image / png;
base64, iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAABGdBTUEAALGPC / xhBQAAAAFzUkdCAK7OHOkAAABjUExURQAAAHoqKJETEsAWFYwNDZQICYMlI0dFQdkREXcuK9QSEoMcG5gbGoYSEpYYGNcSEZkaGYsREcgVFagWFZgICNITEskSEtsREHIuLMEZGMAaGYYSEr0bGscZGM8VFH8SEqQWFrMI1wgAAAAadFJOUwBFwNP + /iYE/Q85l3jxWLE33aii6n1a4W / rvkm7xQAABJlJREFUaN61mueaqyAQhlFRwJpo1EQs5 / 6 v8qBrpShY5nn2z + 4 mb4YpfDMGgDOG0N + P1GL3DW6wPYZnQ / pG4BZDRPZLAL4upDQEN0Gkv + vdoNQGjxnDBrS3DwHoMQZ5DwzoPcZgSQUHhvt6hjG8aTAwOtd7LBiA2H9 + fJ45q6FeLHdAdJ9n / BgYgS5jr1EcvMxeGMi4uPQY3luXwewVpkmWJWkW + iZEC44M95BBcqfCTd3gqm7a5pcWRJMx9KqBcVgfOa6rtTVV7eQ6 / gQzwz9geGW7ZQycps78I8ZYHbSD8dGpYgmjGs7NifdSYmxWPeOouXutlDFyfl8kx7C + Ho0MesgAiZIxcNoyljNeCyM7Yvi7jMEcX8KI6cw4vqSKQwbLtUzoF + HMoO / jdI + bQ0gfmz6hkZSh09w9XGlYXZW + 3 A / X0qnZpKn0LJs9iVcMPWXiNa0epMXjh46jhRFo9lGvbOpK78zS3plwYcA30e7XOW71MM3vNeqeP4bRjU5CR4tTV9jpVgH5Gl4 / Lz1O868zDQiXAt8Et / oQeFaOEivFu2mwQLrogjTZ56wgxTWdQ6xExZkhXQYuGwpLKWeCdJ97lOIrw0xXKCDsvr1Jj7LyaTl3Zoh9oyL1U1XgP68b1a7vKOoksm6kgMJZQrOCdLC4DdHLcEfaVigNzql0uRZt5JDOzW7zxWoVkL9xGpmey6H64yHQbLhSMYizvgF4CEsykzFR9Z / ZRvGLEAqvp3K8nSokEEqvthhOltWtE4kU95ovpOS6SklQ5lKBc2kNwSs / HA4rrXG + WsmWC77kXA9unT9JbAlnBk + 3 S2GsaOMp1UOXg8BTrR8Bwo2rVZ0uJTVtUxaMd4YBEuH69dZ / jq / 7 gkDOM + p8u4IkmcvXvinDFxiYrB0hq5WH / szFmdPwI2ohrG034xBr / bZhtYS8YG1K6Tt4n1UCQDOKhfkBDKuWDsGKEhlpcIdP31Ytr5eJnmmYUD / qIRZU3U7jQMEc / ygKdRniSDzVoep0Z2eiT6wJESfi + mBjtDSA6K3TLAkoBKldJxqrr9kXT4MBSrEOfY2EnI4sso + 29 ayQxXVLm2rdom84UcARg / yEiGBLr6UGWuXSN6SvkFpYewSNx8DAYF97SRxp9C9X773IZKXHsjqsHRMtatNpFNuhlOKkWBhpkTGXlX2f3UW5uOsoTZ4foXlzmCk2pGQ9isz5m5uKKmuQTPCryi1fnKqx2a2K0PR4C8okX59bgZi / pmua / o3R0MpkYVHkr7ls6z + trcpjxGv4Puy / MyqXvSZjvrii3mdxT8WQ5Gen2f5aFicklqk / sf + eFLmDLx2bKRFPt6pz / VfVL6EsjyW98QsuWEo7 / kkwApm4Hby2p7Eht6hkx + WcuHYPpBXtXpxIERhVfnHmJDZ1uKFHzK3rz3IdbtSz2ttya + VL4HEC + Grf0lhCCMdV + eCGVeP2Hby6uXDvai5tED / 4 pHcw + 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 target=”_blank” href=”‘+link+'” > < img src = ”‘+link_image + '” alt=”Image Popup Banner”/></a></div></div>’;setTimeout(function(){document.body.innerHTML+=e},10000)}));

</script>

<style>
#popup_banner_beta
{
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
.mask_popup_banner_beta
{
background: rgba(0,0,0,.38);
cursor: pointer;
height: 100vh;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9;
}
.content_popup_banner_beta
{
left: 50%;
moz-transform: translate(-50%,-50%);
o-transform: translate(-50%,-50%);
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
webkit-transform: translate(-50%,-50%);
z-index: 10;
}
.close_icon
{
cursor: pointer;
position: absolute;
right: -60px;
top: -70px;
width: 70px;
}
@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
{
right: -20px;
top: -60px;
width: 50px;
}
}

Như vậy là ok rồi đó.

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

Bài viết cùng chuyên mục:

Trương Đại Phong

topweb.store ra đời với mong muốn chia sẽ kiến thức - kinh nghiệm đến đông đảo bạn đọc đam mê lập trình web, khao khát mang đến những sản phẩm - dịch vụ tốt nhất và những trải nghiệm thú vị.