你可以使用以下代码实现一个右下角窗口弹窗,并添加定时刷新弹出功能:
HTML:
弹窗标题
弹窗内容
CSS:
.popup { position: fixed; bottom: 20px; right: 20px; width: 300px; background-color: white; border: 1px solid black; padding: 20px; display: none; } .content { margin-bottom: 10px; } #close { float: right; }
jQuery:
$(document).ready(function() { // 显示弹窗 function showPopup() { $("#popup").fadeIn(); } // 隐藏弹窗 function hidePopup() { $("#popup").fadeOut(); } // 定时刷新弹窗 function refreshPopup() { showPopup(); setTimeout(function() { hidePopup(); }, 5000); } // 关闭按钮点击事件 $("#close").click(function() { hidePopup(); }); // 页面加载时显示弹窗 showPopup(); // 每60秒刷新弹窗 setInterval(function() { refreshPopup(); }, 60000); });
这段代码首先定义了两个函数showPopup()
和hidePopup()
,用于显示和隐藏弹窗。refreshPopup()
函数用于定时刷新弹窗,它会调用showPopup()
显示弹窗,并在5秒后调用hidePopup()
隐藏弹窗。
在页面加载完成时,会调用showPopup()
显示弹窗。然后使用setInterval()
函数每60秒调用refreshPopup()
函数刷新弹窗。
关闭按钮的点击事件会调用hidePopup()
隐藏弹窗。
注意:在页面加载时,弹窗会显示一次,然后每60秒刷新一次弹窗。你可以根据需要调整定时刷新的时间间隔。