PC页面客服微信QQ弹窗（鼠标移入显示移出隐藏）

Posted 2020-12-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);}