网页被闲置时弹窗提醒
in Skill with 1602 Views

网页被闲置时弹窗提醒

in Skill with 1603 Views

这是一个很无聊的功能,当访问我们的网页时,如中途有事或离开当前页面超过三分钟,页面即会弹窗显示一个DIV。

当然DIV里的内容可以随便编辑,可以是你网站的热点新闻,也可以是一张搞笑的图片,亦或是利用一言的API随机出一条文字。

很多很多的玩法可以自行去完善挖掘,下面开始上代码。当然如果您的网站没有引入js文件,需要先引用js包。

首先是css部分,由于每个人的网页布局都不一样,可以适当根据自己的网站博客调整相应的css。

<style> 
#a_showhotnews_list_dia{ 
    width:100%; 
    height:1000px; 
    background-color: rgba(0,0,0,0.6); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); 
    position: absolute; 
    z-index: 999999999999999999999999; 
    top: 0; 
    left: 0; 
} 
.tj_box{ 
    width:1000px; 
    height:480px; 
    background-color:rgb(250,250,250); 
    margin:96px auto 0; 
    border-radius: 10px; 
} 
.tj_top{ 
    padding:10px 20px 10px 20px; 
    height:40px; 
    line-height:40px; 
    color:#666; 
    FONT-FAMILY:"Heiti", "Microsoft YaHei", "Arial Narrow"; 
    font-size:20px; 
    position:relative; 
} 
.tj_top .close1{ 
    position:absolute; 
    top:18px; 
    right:25px; 
    height:19px; 
    width:19px; 
    border:#F00; 
} 
.tj_top .close1 a{ 
    height:19px; 
    width:19px; 
    display:inline-block; 
    background:url(http://www.oicqzone.com/tool/3min/close1.png) no-repeat;  
} 
.tj_top .close1 a:hover{ 
    background:url(http://www.oicqzone.com/tool/3min/close1.png) no-repeat -19px 0;  
} 
</style> 

以下是DIV部分,在页面添加以下代码,即可。

<div id="a_showhotnews_list_dia" style="display:none"> 
 <div id="a_showhotnews_list" class="tj_box"> 
  <div class="tj_top">本网页已闲置超过3分钟,按键盘任意键或点击空白处,即可回到网页
   <div id="a_showhotnews_top_close" class="close1"><a target="_self" href="javascript:void(0)"></a></div>
  </div>
 </div>
</div> 

最后的话,是一段监测事件的JS,同理,加入网页底部即可。

<script> 
    $(function() { 
        var f = ((1 * 60) + 2) * 1000; 
        var g; 
        var e = 0; 
        var b = $('#a_showhotnews_list_dia'); 
        var d = $("#a_showhotnews_list"); 
        var h = parseInt(d.css("margin-top").replace(/px/, "")); 
        var a = $("#a_showhotnews_list_close"); 
        a.click(function() { 
            b.hide() 
        }); 
        var xf_top = $("#a_showhotnews_top_close"); 
        xf_top.click(function() { 
            b.hide() 
        }); 
        $(window).keypress(function() { 
                b.hide() 
        }); 
        b.click(function() { 
            b.hide() 
        }); 
        d.click(function(i) { 
            i.stopPropagation() 
        }); 
        $.fn.triggerPageRefresh = function() { 
            location.reload() 
        }; 
        $.fn.resetIdleTimeup = function() { 
            if (g !== null) { 
                clearTimeout(g) 
            } 
            g = setTimeout(function() { 
                if (b.css("display") === "none") { 
                    var i = h + $(window).scrollTop(); 
                    d.css({ 
                        "margin-top": i 
                    }); 
                        b.css({ 
                        "height":$(document).height() 
                    }); 
                     
                    b.show(); 
         
         
try { 
        ga('send', 'event', 'xuanfu', 'show', 'xuanfu',1); 
    } catch (e) {} 
 
                     
                } 
            }, f) 
        }; 
        $("body").mousemove(function() { 
            if (b.css("display") === "none") { 
                b.resetIdleTimeup() 
            } 
        }).resetIdleTimeup() 
    }); 
if(document.getElementById("a_hotnews_list_c")!=null) 
{ 
    document.getElementById('a_hotnews_list_c').onclick = function() { 
    try { 
        ga('send', 'event', 'xuanfu_c', 'click', 'xuanfu_c',1); 
    } catch (e) {} 
} 
} 
</script>

至此,代码部分就完成啦,效果如下。如有问题,可下方留言探讨哦!

如果本文对您有用的话,欢迎在下方留言评论哦~
发表评论
选择表情
  1. Flyers
    A罩

    学习了,谢谢!

    Safari 13 江苏省无锡市 移动
  2. Kiosr
    A罩

    hhhhhh 突然发现博客的等级是我以前写的方法,罩杯制

    火狐浏览器 69 山东省 移动
    1. Jdeal
      主人
      @Kiosr

      哈哈,猥琐风~

      Chrome 63 江苏省无锡市 电信