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

最新推荐文章于 2024-08-18 10:54:05 发布
最新推荐文章于 2024-08-18 10:54:05 发布
阅读量931 收藏 1
点赞数
分类专栏： js 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fcdxdx/article/details/84383044
版权

 

//自动关闭提示框  
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"));  
}

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

 

 

   <script type="text/javascript">

 

 function form_check(){  
     if(document.form1.user.value==""){Alert("请输入用户名！");document.form1.user.focus();return (false);}  
     if(document.form1.password.value==""){Alert("请输入密码！");document.form1.password.focus();return (false);}  
     }  
</script>  
  
<form name="form1" οnsubmit="return form_check();" method="post" action="login.asp">   
用户名： <input name="user" type="text" id="user"/>  
密码： <input name="password" type="password" id="password" />  
<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>

 

 

最后一次凤凰花
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现定时自动关闭DIV层提示框的方法
10-24
主要介绍了JS实现定时自动关闭DIV层提示框的方法,可实现加载时载入js代码控制div层提示框自动关闭的效果,非常简单实用,需要的朋友可以参考下
jQuery可自动隐藏顶部消息提示框代码
06-10
本项目涉及的是使用jQuery实现一个可自动隐藏的顶部消息提示框插件，该插件具备多种功能，如设定不同类型的提示消息在特定时间后自动消失。 首先，jQuery的选择器和DOM操作是基础。在创建这个提示框插件时，开发者...
JavaScript自动关闭窗口
尼奥
11-24 1347
JavaScript自动关闭窗口                window.onload = function () {alert('打开页面自动弹出框！');}   //自动关闭提示框     function Alert(str) {         var msgw,msgh,bordercolor;        
js提示框，n秒后自动关闭
cnceohjm的专栏
04-11 1881
JavaScript自动关闭窗口 //自动关闭提示框 function Alert(str) { var msgw,msgh,bordercolor; msgw=350;//提示窗口的宽度 msgh=80;//提示窗口的高度 titleheight=25 //提
js弹出提示信息并自动关闭
程序员爱酸奶
01-29 9725
这是一个demo，直接上代码： HTML> HEAD> TITLE> New Document TITLE> META NAME="Generator" CONTENT="EditPlus"> script type="text/javascript" src="/js/jquery/jquery-1.4.1.min.js">script> scri
基于JS和CSS的自动关闭动态提示框
peakandyuri的专栏
05-24 988
今天有需要一个自动消失的动态提示框组件，在网上搜了一圈，未找到合适的就自已花了点 时间写了一个，实现思路也许不是最好的，但还是可以给一些拿来主义者使用。由于本机安装的浏览器限制，并未完全测试组件的兼容性，仅通过本人安装了的chrome47、IE11、Edge浏览器，低版本浏览器也许会不兼容。css代码.da_layer{ width: 100%; height: auto;
html5点击弹出自动关闭消息提示框
11-24
3. **自定义消息提示框**：由于`alert()`等内建函数并不支持自动关闭，我们需要自定义一个消息提示框。这通常涉及到创建一个新的HTML元素（如`div`），通过CSS设置样式使其看起来像一个提示框，然后用JavaScript控制...
jQuery网页顶部消息提示框插件
06-24
jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来简化DOM操作和事件处理，其中包括创建动态和自定义的消息提示框。本篇文章将深入探讨“jQuery网页顶部消息提示框插件”的相关知识点，帮助开发者构建更加...
JS实时弹出新消息提示框并有提示音响起的实现代码
10-22
实现这一功能主要依靠JavaScript（JS）和AJAX技术，以及音频播放和动态显示新消息提示框的方法。 知识点一：AJAX技术 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能向服务器...
js提示框替代系统alert,自动关闭alert对话框的实现方法
01-19
自己写了个alert提示框。因为系统alert在苹果手机微信中，提示时，顶部会显示网站地址。 同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框，并自动关闭。 效果图 css样式 /*弹出消息对话框样式*/ .show_alert_box{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:rgba(0,0,0,0.6); display:none; z-index:200; } .show_alert_div{ width:70%; position:ab
JavaScript实现自动弹出窗口并自动关闭窗口的方法
12-11
本文实例讲述了JavaScript实现自动弹出窗口并自动关闭窗口的方法。分享给大家供大家参考。具体如下： 这里介绍的JavaScript自动弹出窗口并自动关闭窗口，JS实现此特效似乎很简单，打开网页后即显示一个弹出窗口，之后会自动离开，使用了window.open和document.open();以及document.close();对象共同来实现，现在似乎用的不多了。 运行效果如下图所示： 具体代码如下： <HTML> <HEAD> <TITLE>自动离开的窗口</TITLE> [removed] <!-- var flyingwin var popupwidth=200 var popu
js弹窗自动关闭
c230704的博客
06-22 1706
<c:if test="${not empty message}"> <div id="message" class="alert alert-success"> <button data-dismiss="alert" class="close">×</button> ...
javascript实现自动关闭的alert对话框
weixin_30384031的博客
02-14 2014
转自：http://hi.baidu.com/803110/item/0bff6bce2d01023298b498c0 其实使用一个非模式对话框模拟出alert对话框的效果，代码如下—— <script language="JavaScript">var aaafunction test(){aaa=if0.showModeless...
JS 窗口自动关闭
chengmianxie5404的博客
01-21 210
setTimeout("alert('对不起, 要你久候')", 3000 ) 该方法的意思是页面加载3秒的时候弹出窗口，同样，也可以使我们的窗口关闭，如extjs 中可以这样使用： setTimeout(function () { Ext.Msg.hide();...
前端：js实现提示框（自动消失）
weixin_46001736的博客
08-28 1390
前端：js实现提示框（自动消失）
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 328
【代码】springboot网上商品订单转手系统bootpf
实现谷歌搜索框风格的自动提示功能
当用户停止输入一段时间后，或者达到特定条件（如没有更多匹配结果），提示框会自动关闭。 `autopoint.js`是一个实用的jQuery插件，通过简化输入框的交互设计，提升用户在输入过程中查找和选择相关选项的效率，尤其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值