分享好友 教程首页 教程搜索 频道列表

常用的弹窗关闭带时间缓存js效果

2024-12-12 00:261130
+关注30
核心提示:在前端开发中,常用的到的弹窗关闭时间周期,确定后再规定的时间内不会再次显示

在前端开发中,常用的到的弹窗关闭时间周期,确定后再规定的时间内不会再次显示

前端代码

<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);
});


每个条件的含义都标注好的,按量使用即可

本文标签: #弹窗 #缓存 #通知 #js #javascript
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

js怎么实现弹幕功能

    实现方法:1、创建html文件;2、添加html代码架构;3、在body标签中使用div、input、button标签分给页面设计效果显示框、输入框、弹幕提交按钮;4、添加script标签并写入js代码来实现弹幕效果;5、通过浏览器方式查看设计效果。

小黑 JavaScript教程2024-03-12

在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

    今天介绍在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

小黑 JavaScript教程2023-07-28

手机版上的弹窗html、css、js

    以下是一个简单的示例弹窗的 HTML、CSS 和 JavaScript 代码,这个弹窗的样式和动作分别由 CSS 和 JavaScript 控制。当页面加载完毕后,自动运行

小黑 CSS教程2023-04-12

html实现弹窗的实例

    用html及原生js写个弹窗,供参考

网络转载 网页素材2021-12-22

前端开发技术之jquery实现可关闭的倒计时广告特效HTML代码

    这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各

网络转载 JS相关2021-12-22

下一篇
我来说两句
抢沙发