Code Popup ảnh

Tác giả server360, T.M.Hai 15, 2018, 03:43:56 CHIỀU

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Code Popup ảnh


Bạn cần thông báo cho mọi người truy cập Blogspot về một vấn đề gì đó bạn nên có một bảng thông báo có thể là hình ảnh hoặc văn bản. Code này cho tiện ích này chia sẻ cũng đã khá lâu nên có nhiều bất cập trong tình trạng Blogger Google có nhiều cập nhật mới do vậy nhiều code không còn phù hợp.

Sau đây là hướng dẫn cài đặt Code hiển thị Popup thông báo bằng hình ảnh hoặc văn bản chỉ xuất hiện một lần.

1. Trường hợp chỉ dùng thông báo dạng văn bản.
Để sử dụng Popup thông báo dạng văn bản như trên thì các bạn hãy vào chỉnh sửa mẫu và dán đoạn mã sau vào trước thẻ ''</head>'' rồi lưu lại.

Mã nguồn [Chọn]
<script type='text/javascript'>
      //<![CDATA[
        var text = 'Nội dung bạn cần thông báo';
        var icon_close = 'httpss://4.bp.blogspot.com/-K2abxSSGK9I/W4JGheVSp7I/AAAAAAAAEc4/SWOCU1vtTaoFvwXEKc3Oef227zq7c1NQwCLcBGAs/s1600/clock-icon.png'
function closePopup() {
    document.getElementById("popup_banner").remove(), setCookie("showPopupBanner", 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("showPopupBanner") && (document.addEventListener("DOMContentLoaded", function(event) {
    var e = '<div id="popup_banner"><div onclick="closePopup()" class="mask_popup_banner"></div><div class="content_popup_banner"><img src="' + icon_close + '" class="close_icon" onclick="closePopup()" alt="Close Image"> ' + text + ' </div></div>';
    setTimeout(function() {
        document.body.innerHTML += e
    }, 1000)
}));
    //]]>
    </script>
    <style>
#popup_banner{position:fixed;width:100%;height:100vh;z-index:99999;top:0;left:0}
.mask_popup_banner{background:rgba(0,0,0,.38);cursor:pointer;position:absolute;width:100%;height:100vh;top:0;z-index:9;left:0}
.content_popup_banner{position:absolute;top:50%;left:50%;z-index:10;transform:translate(-50%,-50%);
background:#fff;
  -webkit-box-shadow: inset 0 0 50px 0 #939393;
  -moz-box-shadow: inset 0 0 50px 0 #939393;
  box-shadow: inset 0 0 50px 0 #939393;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-family:Arial;
  font-size:22px;
  color:#000;
  padding:15px;
}
.close_icon{position:absolute;top:-10px;right:-10px;width:35px;cursor:pointer}
@media only screen and (max-width:480px){.content_popup_banner{width:100%;margin:0 10px 0 5px !important}
.close_icon{top:0p;right:20px;width:24px}}
    </style>

2. Trường hợp chỉ dùng thông báo dạng hình ảnh có dẫn liên kết tới trang đích.

Đây là Popup thông báo sử dụng hình ảnh có liên kết và khi nhấn vào hình ảnh thì sẽ được đưa tới trang đích.
Để sử dụng Popup thông báo dạng hình ảnh có dẫn liên kết như trên thì các bạn hãy vào chỉnh sửa mẫu và dán đoạn mã sau vào trước thẻ '</head>' rồi lưu lại.

Mã nguồn [Chọn]
<script type='text/javascript'>
      //<![CDATA[
        var link_image = 'Linh hình ảnh hiển thị';
        var link = 'Link trang đích';
        var icon_close = 'httpss://4.bp.blogspot.com/-K2abxSSGK9I/W4JGheVSp7I/AAAAAAAAEc4/SWOCU1vtTaoFvwXEKc3Oef227zq7c1NQwCLcBGAs/s1600/clock-icon.png'
function closePopup() {
    document.getElementById("popup_banner").remove(), setCookie("showPopupBanner", 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("showPopupBanner") && (document.addEventListener("DOMContentLoaded", function(event) {
    var e = '<div id="popup_banner"><div onclick="closePopup()" class="mask_popup_banner"></div><div class="content_popup_banner"><img src="' + icon_close + '" class="close_icon" onclick="closePopup()" alt="Close Image"><a href="'+link+'"><img class="popup_banner_image" src="'+link_image+'" alt="Image Popup Banner"/>[/url]</div></div>';
    setTimeout(function() {
        document.body.innerHTML += e
    }, 1000)
}));
    //]]>
    </script>
    <style>
     #popup_banner{position:fixed;width:100%;height:100vh;z-index:99999;top:0;left:0} .mask_popup_banner{background:rgba(0,0,0,.38);cursor:pointer;position:absolute;width:100%;height:100vh;top:0;z-index:9;left:0}
.content_popup_banner{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%)}
.popup_banner_image{width:500px;height:250px;margin:0 auto}
.close_icon{position:absolute;top:-20px;right:-20px;width:40px;cursor:pointer}
@media only screen and (max-width:480px){
.content_popup_banner{width:300px}
.content_popup_banner a img:nth-of-type(1){width:100%}
.close_icon{top:-10px;right:-5px;width:30px}}
    </style>

Các chủ đề tương tự (10)

47592

Trả lời: 0
Lượt xem: 1157

47607

Trả lời: 0
Lượt xem: 2716

47594

Tác giả server360


Trả lời: 0
Lượt xem: 8034

47585

Tác giả server360


Trả lời: 0
Lượt xem: 2281

10414

Tác giả codervncodeign1639


Trả lời: 0
Lượt xem: 3073

T.Chín 17, 2015, 06:25:22 CHIỀU
by codervncodeign1639