网页被闲置时弹窗提醒

教程 提示

这是一个很无聊的功能，当访问我们的网页时，如中途有事或离开当前页面超过三分钟，页面即会弹窗显示一个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>

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

本文由 Jdeal 创作，采用 知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。
最后编辑时间为: 2019-07-26 13:26