可自动关闭的JS消息提示框

于 2012-08-31 11:36:14 发布
阅读量2.2w 收藏 11
点赞数 3
文章标签： div function button 工作 input html
本文提供了一个使用 JavaScript 实现的自动关闭提示框功能，包括创建提示窗口、设置关闭时间和移除元素等关键步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Js代码   收藏代码
  1. //自动关闭提示框  
  2. function Alert(str) {  
  3.     var msgw,msgh,bordercolor;  
  4.     msgw=350;//提示窗口的宽度  
  5.     msgh=80;//提示窗口的高度  
  6.     titleheight=25 //提示窗口标题高度  
  7.     bordercolor="#336699";//提示窗口的边框颜色  
  8.     titlecolor="#99CCFF";//提示窗口的标题颜色  
  9.     var sWidth,sHeight;  
  10.     //获取当前窗口尺寸  
  11.     sWidth = document.body.offsetWidth;  
  12.     sHeight = document.body.offsetHeight;  
  13. //    //背景div  
  14.     var bgObj=document.createElement("div");  
  15.     bgObj.setAttribute('id','alertbgDiv');  
  16.     bgObj.style.position="absolute";  
  17.     bgObj.style.top="0";  
  18.     bgObj.style.background="#E8E8E8";  
  19.     bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";  
  20.     bgObj.style.opacity="0.6";  
  21.     bgObj.style.left="0";  
  22.     bgObj.style.width = sWidth + "px";  
  23.     bgObj.style.height = sHeight + "px";  
  24.     bgObj.style.zIndex = "10000";  
  25.     document.body.appendChild(bgObj);  
  26.     //创建提示窗口的div  
  27.     var msgObj = document.createElement("div")  
  28.     msgObj.setAttribute("id","alertmsgDiv");  
  29.     msgObj.setAttribute("align","center");  
  30.     msgObj.style.background="white";  
  31.     msgObj.style.border="1px solid " + bordercolor;  
  32.     msgObj.style.position = "absolute";  
  33.     msgObj.style.left = "50%";  
  34.     msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";  
  35.     //窗口距离左侧和顶端的距离   
  36.     msgObj.style.marginLeft = "-225px";  
  37.     //窗口被卷去的高+（屏幕可用工作区高/2）-150  
  38.     msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-150 +"px";  
  39.     msgObj.style.width = msgw + "px";  
  40.     msgObj.style.height = msgh + "px";  
  41.     msgObj.style.textAlign = "center";  
  42.     msgObj.style.lineHeight ="25px";  
  43.     msgObj.style.zIndex = "10001";  
  44.     document.body.appendChild(msgObj);  
  45.     //提示信息标题  
  46.     var title=document.createElement("h4");  
  47.     title.setAttribute("id","alertmsgTitle");  
  48.     title.setAttribute("align","left");  
  49.     title.style.margin="0";  
  50.     title.style.padding="3px";  
  51.     title.style.background = bordercolor;  
  52.     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";  
  53.     title.style.opacity="0.75";  
  54.     title.style.border="1px solid " + bordercolor;  
  55.     title.style.height="18px";  
  56.     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";  
  57.     title.style.color="white";  
  58.     title.innerHTML="提示信息";  
  59.     document.getElementById("alertmsgDiv").appendChild(title);  
  60.     //提示信息  
  61.     var txt = document.createElement("p");  
  62.     txt.setAttribute("id","msgTxt");  
  63.     txt.style.margin="16px 0";  
  64.     txt.innerHTML = str;  
  65.     document.getElementById("alertmsgDiv").appendChild(txt);  
  66.     //设置关闭时间  
  67.     window.setTimeout("closewin()",2000);   
  68. }  
  69. function closewin() {  
  70.     document.body.removeChild(document.getElementById("alertbgDiv"));  
  71.     document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));  
  72.     document.body.removeChild(document.getElementById("alertmsgDiv"));  
  73. }  

   使用方法 直接调用Alert('提示信息')即可，如下：

 

   <script type="text/javascript">

Html代码   收藏代码
  1.      function form_check(){  
  2.      if(document.form1.user.value==""){Alert("请输入用户名！");document.form1.user.focus();return (false);}  
  3.      if(document.form1.password.value==""){Alert("请输入密码！");document.form1.password.focus();return (false);}  
  4.      }  
  5. </script>  
  6.   
  7. <form name="form1" onsubmit="return form_check();" method="post" action="login.asp">   
  8. 用户名： <input name="user" type="text" id="user"/>  
  9. 密码： <input name="password" type="password" id="password" />  
  10. <INPUT id=btnEnter type=image src="images/login.gif" name=btnEnter>   

 

下面是完整的例子

<html>
<head>
<title>JavaScript自动关闭窗口</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>   
<input type="button" value="弹出alert框自动关闭" onClick="Alert('不点击确定三秒后自动关闭')">  
<script>
//自动关闭提示框  
function Alert(str) {  
    var msgw,msgh,bordercolor;  
    msgw=350;//提示窗口的宽度  
    msgh=80;//提示窗口的高度  
    titleheight=25 //提示窗口标题高度  
    bordercolor="#336699";//提示窗口的边框颜色  
    titlecolor="#99CCFF";//提示窗口的标题颜色  
    var sWidth,sHeight;  
    //获取当前窗口尺寸  
    sWidth = document.body.offsetWidth;  
    sHeight = document.body.offsetHeight;  
//    //背景div  
    var bgObj=document.createElement("div");  
    bgObj.setAttribute('id','alertbgDiv');  
    bgObj.style.position="absolute";  
    bgObj.style.top="0";  
    bgObj.style.background="#E8E8E8";  
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";  
    bgObj.style.opacity="0.6";  
    bgObj.style.left="0";  
    bgObj.style.width = sWidth + "px";  
    bgObj.style.height = sHeight + "px";  
    bgObj.style.zIndex = "10000";  
    document.body.appendChild(bgObj);  
    //创建提示窗口的div  
    var msgObj = document.createElement("div")  
    msgObj.setAttribute("id","alertmsgDiv");  
    msgObj.setAttribute("align","center");  
    msgObj.style.background="white";  
    msgObj.style.border="1px solid " + bordercolor;  
    msgObj.style.position = "absolute";  
    msgObj.style.left = "50%";  
    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";  
    //窗口距离左侧和顶端的距离   
    msgObj.style.marginLeft = "-225px";  
    //窗口被卷去的高+（屏幕可用工作区高/2）-150  
    msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-150 +"px";  
    msgObj.style.width = msgw + "px";  
    msgObj.style.height = msgh + "px";  
    msgObj.style.textAlign = "center";  
    msgObj.style.lineHeight ="25px";  
    msgObj.style.zIndex = "10001";  
    document.body.appendChild(msgObj);  
    //提示信息标题  
    var title=document.createElement("h4");  
    title.setAttribute("id","alertmsgTitle");  
    title.setAttribute("align","left");  
    title.style.margin="0";  
    title.style.padding="3px";  
    title.style.background = bordercolor;  
    title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";  
    title.style.opacity="0.75";  
    title.style.border="1px solid " + bordercolor;  
    title.style.height="18px";  
    title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";  
    title.style.color="white";  
    title.innerHTML="提示信息";  
    document.getElementById("alertmsgDiv").appendChild(title);  
    //提示信息  
    var txt = document.createElement("p");  
    txt.setAttribute("id","msgTxt");  
    txt.style.margin="16px 0";  
    txt.innerHTML = str;  
    document.getElementById("alertmsgDiv").appendChild(txt);  
    //设置关闭时间  
    window.setTimeout("closewin()",2000);   
}  
function closewin() {  
    document.body.removeChild(document.getElementById("alertbgDiv"));  
    document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));  
    document.body.removeChild(document.getElementById("alertmsgDiv"));  
}
</script>
</body>   
</html>



skylinethj
关注
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值