首页 > 其他 > 详细

1.倒数几秒弹窗关闭

时间:2017-01-05 16:19:15      阅读:228      评论:0      收藏:0      [点我收藏+]
技术分享
<!DOCTYPE html>
<html lang="zh">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
    <!--[if lt IE 9]>
    <script src="js/respond/html5shiv.js" type="text/javascript"></script>
    <script src="js/respond/respond.min.js" type="text/javascript"></script>
    <![endif]-->
</head>
<body>
    <script  type="text/javascript" src="/js/jquery.js"></script>
    <script  type="text/javascript">
    $(function(){

        popInfo("展示信息系你吸血你心心念念相信你息怒息怒展示信息系你吸血你心心念念相信你息怒息怒展示信息系你吸血你心心念念相信你息怒息怒",2000);

        function popInfo(content,time){
            var showTime=time/1000;
            var popInfoBox="<div class=‘pop-info-box‘ style=‘width: 400px;padding: 12px 12px;background: #D9EDF7;text-align: center;position: fixed;left: 50%;top: 50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); ‘ ><p>"+content+"</p><p class=‘pop-info-close‘ style=‘margin-top: 10px;‘><i>"+showTime+"</i>秒之后关闭</p></div>";
            $("body").append(popInfoBox);
            function changeInfoTime(){
                if(showTime){
                    showTime-=1;
                    $(".pop-info-close i").html(showTime);
                }else{
                    hidePop();
                }
                    
            };
            //hide
            function hidePop(){
                    $(".pop-info-box").hide();
            };
            setInterval(changeInfoTime,1000);
        }
    
    });
    </script>
</body>
</html>
View Code

如图:技术分享

1.倒数几秒弹窗关闭

原文:http://www.cnblogs.com/lanyueff/p/6252701.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!