温馨提示×

jquery实现的右下角窗口弹窗加定时刷新弹出功能

小云
84
2023-09-02 05:42:53
栏目: 编程语言

你可以使用以下代码实现一个右下角窗口弹窗,并添加定时刷新弹出功能:

HTML:

<div id="popup" class="popup">
<div class="content">
<h3>弹窗标题</h3>
<p>弹窗内容</p>
</div>
<button id="close">关闭</button>
</div>

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秒刷新一次弹窗。你可以根据需要调整定时刷新的时间间隔。

0