网页弹窗在线客服免费源码
现在的网页在线客服工具有很多很多，百度爱番番，抖音飞鱼，53快服，快商通，智齿，美洽等等在线客服工具，但是作为在线客服是无法及时有效的留存客户数据，即使网站非常美观符合用户，话术非常到位始终无法做到时时与客户进行沟通。
Html代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Popup Window</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div></div> <div> <div> <h2>联系客服</h2> </div> <div> <img src="ifinance.png" alt="弹窗图片" style="max-width: 100%; height: auto;"> </div> <span>×</span> </div> <script src="script.js"></script> </body> </html>
CSS代码
/* 弹窗样式 */
.popup-container {
display: none; /* 隐藏弹窗 */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 350px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
z-index: 9999;
}
.popup-title {
text-align: center;
padding: 10px;
background-color: #f0f0f0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.popup-content {
text-align: center;
padding: 10px;
}
.popup-close {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
/* 遮罩样式 */
.overlay {
display: none; /* 隐藏遮罩 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
/* 媒体查询 */
@media (min-width: 768px) {
.popup-container {
display: block; /* 在大屏幕上显示弹窗 */
}
}Javascript代码
window.addEventListener('DOMContentLoaded', function() {
var overlay = document.querySelector('.overlay');
var popupContainer = document.querySelector('.popup-container');
var closeButton = document.querySelector('.popup-close');
if (window.innerWidth >= 768) {
overlay.style.display = 'block'; /* 在大屏幕上显示遮罩 */
popupContainer.style.display = 'block'; /* 在大屏幕上显示弹窗 */
}
closeButton.addEventListener('click', function() {
overlay.style.display = 'none'; /* 隐藏遮罩 */
popupContainer.style.display = 'none'; /* 隐藏弹窗 */
});
/* 30秒后自动关闭弹窗
setTimeout(function() {
overlay.style.display = 'none';
popupContainer.style.display = 'none';
}, 30000);
*/
});完整源码下载
