在前端开发中,常用的到的弹窗关闭时间周期,确定后再规定的时间内不会再次显示
前端代码
<div><s onclick="pop_cancel();">取消</s><i onclick="pop_close();">确定</i></div>
JS代码
// 弹出框显示函数 function pop_show() { // 检查是否存在名为 'popc' 的 cookie // 如果存在,则表示用户已经关闭过弹出框,不再显示 if (get_cookie('popc')) return; // 显示包含弹出框的 div 元素 $('.pop-div').show(); // 计算弹出框的垂直居中位置 // 448 是弹出框的高度,$(window).height() 是当前窗口的高度 var tp = ($(window).height() - 448) / 2; // 计算弹出框的水平居中位置 // 800 是弹出框的宽度,$(window).width() 是当前窗口的宽度 var lp = ($(window).width() - 800) / 2; // 设置弹出框的 top 和 left 样式属性,使其居中显示 $('.pop-box').css({ top: tp + 'px', left: lp + 'px' }); // 使用 fadein 动画效果显示弹出框,持续时间为 300 毫秒 $('.pop-box').fadeIn(300); } // 弹出框关闭函数 function pop_close() { // 设置名为 'popc' 的 cookie,值为 1,有效期为 1 天(24 小时) // 24 * 60 * 60 = 86400 秒 set_cookie('popc', 1, 86400); // 隐藏包含弹出框的 div 元素 $('.pop-div').hide(); // 使用 fadeOut 动画效果隐藏弹出框,持续时间为 300 毫秒 $('.pop-box').fadeOut(300); } // 取消按钮点击事件处理函数 function pop_cancel() { // 跳转到指定的路径(DTPath),通常是返回首页或其他页面 Go(DTPath); } // 文档就绪事件处理函数 $(function() { // 延迟 1000 毫秒(1 秒)后调用 pop_show 函数,显示弹出框 setTimeout(function() { pop_show(); }, 1000); });
每个条件的含义都标注好的,按量使用即可