js弹出提示信息并自动关闭

最新推荐文章于 2023-10-25 13:48:39 发布

程序员爱酸奶

最新推荐文章于 2023-10-25 13:48:39 发布

阅读量9.7k

点赞数

分类专栏： # java开发

本文链接：https://blog.csdn.net/qq_27790011/article/details/79192483

版权

java开发专栏收录该内容

42 篇文章 1 订阅

订阅专栏

这是一个demo，直接上代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">   
  <script type="text/javascript" src="<%=path%>/js/jquery/jquery-1.4.1.min.js"></script>  
<script type="text/javascript">
$("#download").click(function(){ 
$(document).ready(function(){
    showTips( "正在下载，请稍候", 50, 3 );
    });
});     
//contetn为要显示的内容  
//height为离窗口顶部的距离  
//time为多少秒后关闭的时间，单位为秒  
function showTips( content, height, time ){  
    //窗口的宽度  
  var windowWidth  = $(window).width();  
  var tipsDiv = '<div class="tipsClass">' + content + '</div>';   
  $( 'body' ).append( tipsDiv );  
  $( 'div.tipsClass' ).css({  
      'top'       : height + 'px',  
      'left'      : ( windowWidth / 2 ) - 350/2 + 'px',  
      'position'  : 'absolute',  
      'padding'   : '3px 5px',  
      'background': '#8FBC8F',  
      'font-size' : 12 + 'px',  
      'margin'    : '0 auto',  
      'text-align': 'center',  
      'width'     : '350px',  
      'height'    : 'auto',  
      'color'     : '#fff',  
      'opacity'   : '0.8'  
  }).show();  
  setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );  
}   
  </script>  
 </HEAD>    
 <BODY>  

  <a href="" id="download">下载</a>
 </BODY>  
</HTML>