Có thể bạn quan tâm
Dưới đây là code chèn quảng cáo dạng popup cố định trong trang web.
Chức năng: Hiển thị quảng cáo cố định kiểu popup, góc dưới, bên phải của trình duyệt.
Tính năng:
– Thu nhỏ quảng cáo (Có tác dụng trên tất cả các trang con của web).
– Tắt quảng cáo không hiển thị lại trong vòng 1 ngày (Có tác dụng trên tất cả các trang con của web).
– Cookie ghi nhớ thao tác của khách truy cập: thu nhỏ, tắt trong vòng 1 ngày.
Trong code này mình cần tới thư viện Font-Awesome lên nhớ cho vào nhé.
HTML:
<div class="svl_ads_right"> <div class="ads_right_content"><img src="ads.png" alt=""></div> <div class="ads_right_title">Hotline Tư Vấn</div> <div class="ads_right_controls"> <span class="ads_right_close_button"><i class="fa fa-close"></i></span> <span class="ads_right_ex_button"><i class="fa fa-chevron-down"></i></span> </div> </div>
CSS Inline:
/*ADS*/ .svl_ads_right *,.svl_ads_right { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .svl_ads_right{ position: fixed; bottom: 0; right: 0; display: none; z-index: 9999; } .ads_right_title { position: relative; background: rgb(75, 79, 85); color: #fff; height: 38px; padding: 10px; font-family: Arial; min-width: 180px; cursor: pointer; font-size: 13px; } .ads_right_content { line-height: 0; } .ads_right_controls { position: absolute; bottom: 5px; right: 5px; } .ads_right_controls span { display: block; float: right; margin-left: 5px; cursor: pointer; color: #fff; line-height: 29px; } .ads_right_controls span:hover { color: #1DCAFF; } .hidden_ads_right{ display: none !important; }
Script Inline:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $(window).load(function(){ //Cookies var Cookie = { set: function(name, value, days) { var domain, domainParts, date, expires, host; if (days) { date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); expires = "; expires="+date.toGMTString(); } else { expires = ""; } host = location.host; if (host.split('.').length === 1) { document.cookie = name+"="+value+expires+"; path=/"; } else { domainParts = host.split('.'); domainParts.shift(); domain = '.'+domainParts.join('.'); document.cookie = name+"="+value+expires+"; path=/; domain="+domain; if (Cookie.get(name) == null || Cookie.get(name) != value) { domain = '.'+host; document.cookie = name+"="+value+expires+"; path=/; domain="+domain; } } }, get: function(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i=0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') { c = c.substring(1,c.length); } if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, erase: function(name) { Cookie.set(name, '', -1); } }; if(Cookie.get('close_ads_right')){ $('.svl_ads_right').addClass('hidden_ads_right'); } if(Cookie.get('ex_ads_right')){ $('.ads_right_content').slideToggle('slow',function(){ if($('.svl_ads_right').hasClass('ex_ads_right')){ $('.svl_ads_right').removeClass('ex_ads_right'); $('.ads_right_ex_button i').removeClass('fa-chevron-up').addClass('fa-chevron-down'); Cookie.erase('ex_ads_right'); }else{ $('.svl_ads_right').addClass('ex_ads_right'); $('.ads_right_ex_button i').removeClass('fa-chevron-down').addClass('fa-chevron-up'); Cookie.set('ex_ads_right',1); } }); } $('.svl_ads_right').css('display','block'); $('.ads_right_ex_button,.ads_right_title').click(function(){ $('.ads_right_content').slideToggle('slow',function(){ if($('.svl_ads_right').hasClass('ex_ads_right')){ $('.svl_ads_right').removeClass('ex_ads_right'); $('.ads_right_ex_button i').removeClass('fa-chevron-up').addClass('fa-chevron-down'); Cookie.erase('ex_ads_right'); }else{ $('.svl_ads_right').addClass('ex_ads_right'); $('.ads_right_ex_button i').removeClass('fa-chevron-down').addClass('fa-chevron-up'); Cookie.set('ex_ads_right',1); } }); }); $('.ads_right_close_button').on('click',function(){ $('.svl_ads_right').addClass('hidden_ads_right'); Cookie.set('close_ads_right',1,1); }); }); }); </script>
Chúc các bạn thành công!
- Bình luận