PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)
程序员文章站
2022-07-11 11:58:10
...
PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)
html代码:
<div class="msg" onmouseleave="common.showModal(0)">
<div class="msg-btns">
<div class="msg-btn kefu-btn" onmouseenter="common.showModal(1)"><img src="/static/home/img/kefu.png" alt="" /></div>
<div class="msg-btn weixin-btn" onmouseenter="common.showModal(2)"><img src="/static/home/img/weixin.png" alt="" /></div>
</div>
<div class="msg-modals">
<!--客服-->
<div class="msg-modal kefu-modal">
<img src="/static/home/img/qq1.jpg"/>
<img src="/static/home/img/qq2.jpg"/>
</div>
<!--微信-->
<div class="msg-modal wx-modal">
<img src="/static/home/img/weixin.jpg" alt="" />
<p>咨询请扫描微信公众号</p>
</div>
</div>
</div>
javascript代码:
/*
* 洋腔洋调英语 公用函数 common.xxx(obj/str);
*/
void function(undefined){
//全局配置
var common = {
showModal: function(key){ //首页显示隐藏 客服+微信弹窗
var ui = {
modals: document.querySelector(".msg-modals"),
kefubtn: document.querySelector(".kefu-btn"),
kefumodal: document.querySelector(".kefu-modal"),
wxbtn: document.querySelector(".weixin-btn"),
wxmodal: document.querySelector(".wx-modal"),
}
switch (key){
case 0:
var timer = setTimeout(function(){
ui.modals.style.display = "none";
ui.kefubtn.className = "msg-btn kefu-btn";
ui.wxbtn.className = "msg-btn weixin-btn";
ui.kefumodal.style.display = "none";
ui.kefumodal.style.animation = "cui-scale-out .15s ease-out forwards";
ui.wxmodal.style.display = "none";
ui.wxmodal.style.animation = "cui-scale-out .15s ease-out forwards";
clearTimeout(timer);
},400);
break;
case 1:
ui.modals.style.display = "block";
ui.kefubtn.className = "msg-btn kefu-btn active";
ui.wxbtn.className = "msg-btn weixin-btn";
ui.kefumodal.style.display = "block";
ui.kefumodal.style.animation = "cui-scale-in .15s ease-out forwards";
ui.wxmodal.style.display = "none";
ui.wxmodal.style.animation = "cui-scale-out .15s ease-out forwards";
break;
case 2:
ui.modals.style.display = "block";
ui.kefubtn.className = "msg-btn kefu-btn";
ui.wxbtn.className = "msg-btn weixin-btn active";
ui.wxmodal.style.display = "block";
ui.wxmodal.style.animation = "cui-scale-in .15s ease-out forwards";
ui.kefumodal.style.display = "none";
ui.kefumodal.style.animation = "cui-scale-out .15s ease-out forwards";
break;
default:
break;
}
}
}
var Global;
Global = (function(){ return this || (0, eval)('this'); }());
if (typeof module !== "undefined" && module.exports)
{
module.exports = common;
}
else if (typeof define === "function" && define.amd)
{
define(function(){return common;});
}
else
{
!('common' in Global) && (Global.common = common);
}
}();
css代码:
.msg{ position: fixed; top: -webkit-calc((100vh - 141px) / 2); top: calc((100vh - 141px) / 2);right: 30px;z-index: 2;}
.msg-btns{width: 70px; height: 141px;}
.msg-btn{width: 100%; height: 70px;background: rgba(0,0,0,.2); text-align: center;}
.msg-btn.kefu-btn{margin-bottom: 1px;}
.msg-btn.active{background: rgba(0,0,0,.3);}
.msg-btn:hover{cursor: pointer;}
.msg-btn img{width: 40px; margin: 15px;}
.msg-modals{width: 230px; height: 234px; display: none; position: absolute; top: -webkit-calc((100% - 234px) / 2); top: calc((100% - 234px) / 2); right: 70px;}
.msg-modal{width: 210px; height: 234px; display: none; background: #FFF; padding: 10px; box-sizing: border-box; box-shadow: 0 0 2px rgba(100,100,100,.5); border-radius: 3px; position: relative;}
.msg-modal:after{content: ''; width: 15px; height: 15px; background: #fff; border-top: 1px solid rgba(150,150,150,.3); border-right: 1px solid rgba(150,150,150,.3); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: -7.5px; top: -webkit-calc((100% - 15px) / 2); top: calc((100% - 15px) / 2);}
.wx-modal img{width: 100%;}
.wx-modal p{width: 100%; line-height: 30px; text-align: center; font-size: 14px; color: #909090;}
.wx-modal:after{ top: -webkit-calc((100% - 15px) / 2 + 35px); top: calc((100% - 15px) / 2 + 35px);}
.kefu-modal img{width: 100%; margin: 25px 0;}
.kefu-modal:after{ top: -webkit-calc((100% - 15px) / 2 - 35px); top: calc((100% - 15px) / 2 - 35px);}