jquery 信息弹出后自动关闭

最新推荐文章于 2023-01-09 15:40:14 发布

原创最新推荐文章于 2023-01-09 15:40:14 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

知识收集专栏收录该内容

181 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的自动关闭提示框的方法。通过设置提示框的位置、大小及淡入淡出效果，实现了信息展示后自动关闭的功能。此方法适用于网页应用中临时消息提示场景。

<div style="background-color:#C9F" >
信息弹出后自动关闭
<br />
<input type="button" onclick="divFadeAlert()" value="info" />
<input type="hidden" id="hidvalue" value="保存成功！" />
<script type="text/javascript" language="javascript">
function divFadeAlert()
{
   var hidvalue_str=$('#hidvalue').val();
   var divWidth=100;
   var divHeight=100;
   var iLeft=($(window).width()-divWidth)/2;
   var iTop=($(window).height()-divHeight)/2+$(document).scrollTop();
   var divhtml=$("<div>"+hidvalue_str+"</div>").css({position:'absolute',top:iTop+'px',left:iLeft+'px',display:'none',width:divWidth+'px',height:divHeight+'px'});
   divhtml.appendTo('body').fadeIn();
   divhtml.appendTo('body').fadeOut(3000);
}
</script>
</div>