Hello xin chào anh em, đây là bài viết đầu tiên của blog Nhân Services , bài viết này mình sẽ hướng dẫn các bạn cách để tạo một popup hỗ trợ ở góc bên phải của blog, code này do ToiShare Blog viết.
Các bước thực hiện
Bạn chỉ cần đặt đoạn code này vào trước thẻ đóng </body> là được :
<!-- Chat noel -->Bạn chỉnh sửa các nội dung được in đậm sao cho hợp lý nhé.
<style type='text/css'>
.clssimg,.clss2{opacity:0;animation-name:bounceIn;animation-duration:450ms;animation-timing-function:linear;animation-fill-mode:forwards}.clssimg{animation-delay:2s;cursor:pointer}
.clss2{animation-delay:3s}@keyframes bounceIn{0%{opacity:0;transform:scale(0.3) translate3d(0,0,0)}50%{opacity:.9;transform:scale(1.1)}80%{opacity:1;transform:scale(0.89)}100%{opacity:1;transform:scale(1) translate3d(0,0,0)}}@media(min-width:320px) and (max-width:480px){.clssimg{width:60px}.nochatbot{bottom:58px!important;right:50px!important;width:22px!important;height:22px!important;padding:0!important}.modal-content{right:-24px!important;width:19rem!important;bottom:-20px!important}#animate{right:90px!important;bottom:60px!important}}.modal{position:fixed;z-index:999;right:-120px;bottom:53px;opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear .25s,opacity .25s 0s,transform .25s}.modal-content{position:absolute;bottom:80px;right:200px;background-color:white;padding:12px;width:24rem;border-radius:12px;box-shadow:0 1pt 12pt rgba(0, 0, 0, .15)}.close-button{float:left;width:18pt;height:24px;line-height:21px;text-align:center;cursor:pointer;border-radius:1.25rem;background-color:lightgray;font-size:20px;font-weight:900;font-family:georgia}.show-modal{opacity:1;visibility:visible;transform:scale(1.0);transition:visibility 0s linear 0s,opacity .25s 0s,transform .25s}.noidungchat{margin-top:-20px;padding-left:38px;padding-top:20px;width:77%;font-family:'Roboto',sans-serif;font-size:17px;color:#000}.trochuyenngay{font-size:18px;font-weight:400;text-align:center;font-family:sans-serif;width:160.5%;float:left;border-top:.75pt solid rgba(0,0,0,.1);margin:0 -50px;margin-top:10px;padding-top:10px;box-sizing:border-box}.trochuyenngay a{color:rgb(51, 122, 183)}.iconchat{position:absolute;right:15px}.popupchat{position:fixed;bottom:16px;right:16px}.iconchat img{border-radius:100%}.nochatbot{background:red;width:29px;color:white;border-radius:50px;padding:4px;font-size:11px;right:80px;bottom:93px;position:fixed;text-align:center}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated{-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;animation-fill-mode:both}@-webkit-keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}.speech-bubble{position:relative;padding:20px;z-index:99}.speech-bubble:after{content:'';position:absolute;right:0;top:50%;width:0;height:0;border:10px solid transparent;border-left-color:#0083fe;border-right:0;margin-top:15px;margin-right:-9px}span#x{color:white;font-family:'Open Sans',sans-serif;padding:10px;background:#0083fe;position:absolute;border-radius:5px;right:0;top:50%}#animate{display:none;position:fixed;right:120px;bottom:80px;width:100%;
</style>
<div class='popupchat trigger'>
<img class='clssimg' src='https://i.imgur.com/53leblC.gif'/>
<div class='nochatbot clss2'><script>document.write(Math.ceil(Math.random()*10)+2)</script></div></div>
<div class='modal'>
<div class='modal-content'>
<span class='close-button'>×</span>
<div class='iconchat'><img src='https://graph.facebook.com/382984878884009/picture?width=500&height=500' style='width:48px'/></div>
<div class='noidungchat'>
<div>
<p>Hi! How can we help you?</p>
<p style='font-size:15px'>Asked to exchange. Not SPAM.</p></div>
<div class='trochuyenngay'><a href='https://www.messenger.com/t/tranthanhbinhdotvn' onclick='window.open(this.href, "_blank", "height=500,width=900"); return false;' rel='nofollow' target='_blank'><span>Trò Chuyện Ngay</span></a></div>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var modal=document.querySelector(".modal");var trigger=document.querySelector(".trigger");var closeButton=document.querySelector(".close-button");function toggleModal(){modal.classList.toggle("show-modal");}
function windowOnClick(event){if(event.target===modal){toggleModal();}}
trigger.addEventListener("click",toggleModal);closeButton.addEventListener("click",toggleModal);window.addEventListener("click",windowOnClick);
//]]>
</script>
<div class='animated bounceInRight faster speech-bubble' id='animate'><span id='x'></span></div>
<script type='text/javascript'>
/*<![CDATA[*/var x=document.getElementById('x');s=['Xin chào!','Bạn có cần mình hỗ trợ không ?','Click vào đây để bắt đầu nhé!'];var times=0;let delayTime=8*1000;const run=function loop(){jQuery('#animate').css('display','block')
var loops=setTimeout(loop,3000);if(times==3){clearTimeout(loops);jQuery('#animate').addClass('bounceOutRight faster');}
else{s.length&&(x.innerHTML=s.shift(),loops);setTimeout(function(){jQuery('#animate').removeClass('bounceInRight faster');},2000);jQuery('#animate').addClass('bounceInRight faster');}
times++;return false;};setTimeout(run,delayTime);
/*]]>*/
</script>
Bài viết có 0 bình luận
Vui lòng bình luận tôn trọng lẫn nhau...
EmoticonEmoticon