js提示框，n秒后自动关闭

最新推荐文章于 2023-08-28 17:48:46 发布
最新推荐文章于 2023-08-28 17:48:46 发布
阅读量1.8k 收藏 1
点赞数 
<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>  

2 弹出提示框，手动关闭
<html>  
<head>  
<title>JavaScript自动关闭窗口</title>  
<meta http-equiv="content-Type" content="text/html;charset=gb2312">  
</head>  
<body>  
<script>  
function sAlert(strTitle,strContent){ 
    var msgw,msgh,bordercolor; 
    msgw=300;//提示窗口的宽度 
    msgh=100;//提示窗口的高度 
    titleheight=25 //提示窗口标题高度 
    bordercolor="#336699";//提示窗口的边框颜色 
    titlecolor="#99CCFF";//提示窗口的标题颜色

    var sWidth,sHeight; 
    sWidth=document.body.offsetWidth; 
    sHeight=screen.height; 
    var bgObj=document.createElement("div"); 
    bgObj.setAttribute('id','bgDiv'); 
    bgObj.style.position="absolute"; 
    bgObj.style.top="0"; 
    bgObj.style.background="#777"; 
    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);

    var msgObj=document.createElement("div") 
    msgObj.setAttribute("id","msgDiv"); 
    msgObj.setAttribute("align","center"); 
    msgObj.style.background="white"; 
    msgObj.style.border="1px solid " + bordercolor; 
    msgObj.style.position = "absolute"; 
    msgObj.style.left = "50%"; 
    msgObj.style.top = "50%"; 
    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
    msgObj.style.marginLeft = "-225px" ; 
    msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 
    msgObj.style.width = msgw + "px"; 
    msgObj.style.height =msgh + "px"; 
    msgObj.style.textAlign = "center"; 
    msgObj.style.lineHeight ="25px"; 
    msgObj.style.zIndex = "10001";

    var title=document.createElement("h4"); 
    title.setAttribute("id","msgTitle"); 
    title.setAttribute("align","right"); 
    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.style.cursor="pointer"; 
    title.title = "点击关闭"; 
    title.innerHTML="<table border='0′ width='100%'><tr><td align='left'>"+ strTitle +"</td><td>关闭</td></tr></table></div>"; 
    title.οnclick=function(){ 
    document.body.removeChild(bgObj); 
    document.getElementById("msgDiv").removeChild(title); 
    document.body.removeChild(msgObj); 
    }     
    document.body.appendChild(msgObj); 
    document.getElementById("msgDiv").appendChild(title); 
    var txt=document.createElement("p"); 
    txt.style.margin="1em 0" 
    txt.setAttribute("id","msgTxt"); 
    txt.innerHTML=strContent; 
    document.getElementById("msgDiv").appendChild(txt); 
    function closewin() {     
    document.body.removeChild(document.getElementById("msgDiv"));   
  }   
}
</script>  
<input type="button" value="弹出alert框自动关闭" onClick="sAlert('','你要输出的内容！')">    
</body>     
</html>


H_Gragon
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Jquery-自定义alert弹窗提示，自动消失
不凡乃大的博客
08-08 4759
代码】自定义alert弹窗提示，自动消失。
JavaScript特效——弹窗3秒后消失
qq_43852612的博客
06-27 1896
运用JavaScript中的jQuery库实现一些小特效
js弹出提示信息并自动关闭
IT界的小菜比
05-03 7790
script type="text/javascript" src="F:\javasoft\ajax\jquery\jquery-1.4.1.min.js">script>     SCRIPT LANGUAGE="JavaScript">   //contetn为要显示的内容   //height为离窗口顶部的距离   //time为多少秒后关闭的时间，单位为秒   function
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
js实现浏览器右下角弹出提示信息窗口，几秒后自动关闭
热门推荐
松松面包的博客
06-20 1万+
js引入：    //import  //解决浏览器兼容性问题 //浏览器右下角消息提醒 封装一个方法 function msg(title,context){ $.messager.lays(200, 100); //窗口大小 $.messager.anim('fade', 2000);  $.messager.show(title, context,3000); //标题，内容
extjs弹出框 n秒后消失
07-15
为了使弹出框在n秒后自动关闭，我们需要创建一个延时任务，并在任务中调用`Ext.MessageBox.hide`方法。延时任务的创建和启动可以通过`new Ext.util.DelayedTask(function() { ... })`和`delay`方法实现。以下是一个...
Fridge-N-Pantry:该应用程序可通过自动购物清单帮助您跟踪房屋中的食物
03-20
考虑到用户关闭应用后仍需保留食物数据，应用可能使用浏览器的本地存储机制，如localStorage或IndexedDB。这些技术允许应用在用户设备上持久化存储数据，即使在离线状态下也能访问。 六、移动优先设计 为了适应...
JQuery实现文本框自动补全(修改版)
03-16
在网页开发中，为了提供更好的用户体验，我们经常需要实现一种功能：当用户在输入框中输入文字时，系统能够根据已有的数据集自动给出建议，这就是所谓的“自动补全”或“自动提示”。jQuery库因其简洁的API和强大的...
noty-config:Noty.js 的 Jiss 主题与 Bootstrap 3 兼容
06-17
text: '5 秒后自动关闭的 Jiss 主题 Noty', type: 'info', theme: 'jiss', layout: 'bottomCenter', timeout: 5000, onClose: function() { console.log('通知已关闭'); }, }); n.show(); ``` 在 `noty-...
js使用小技巧
07-11
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
js setTimeout实现延迟关闭弹出层
12-09
#flyout { border: solid 2px Gray; background-color: #FFF999; width: 300px; height: 100px; display: none; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
1秒消失 alert jquery_div显示2秒后自动消失js代码分享
weixin_27372101的博客
01-13 671
本文我们主要和大家分享div显示2秒后自动消失js代码，利用setTimeout()，setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。希望能帮助到大家。在做四象限的过程中会有提示的信息，但是想让提示信息在一定的时间后自动隐藏。如上图，2s后提示自动隐藏，怎么做呢？语法setTimeout(code,millisec)提示和注释setTimeout() 只执行 code 一次。...
倒计时结束关闭alert警报弹窗的实现
...
11-19 1245
AlertController import { AlertController } from 'ionic-angular'; export class PaySuccessPage { public time = 10; public timer; // 计时器 constructor(private alertCtrl: AlertController) { this.timeDown(); // 倒计时 this.isPrint(); // 调用的弹窗 } // 倒计时 tim
用div模拟alert对话框，N秒不点击自动关闭（适用IE6、IE7、firefox）
gxj022的专栏
01-16 1272
【转】http://www.javaeye.com/topic/528574 工作需要，经理让做个对话提示框，三秒不点击自动关闭，用在web页面上。如果让我用c#写也许毫不费力，于是觉得并没什么困难，然而真做起来。。。     废话不说，问题如下：根据js运行机制，不可能将一个alert框强行关闭。前几天第一次做，查了好多资料，似乎找到了一个解决方法如test1.html。新建一个ifra
前端：js实现提示框（自动消失）
最新发布
weixin_46001736的博客
08-28 1270
前端：js实现提示框（自动消失）
java倒计时自动关闭弹窗,打开页面弹出窗口子窗口定时自动关闭
weixin_32697149的博客
03-15 805
主页面的head区域添加如下代码，你可以参考研所包中的 a.htm 文件。popup.location.href = 'b.htm';中的b.htm就是你要弹出的子页面子页面b.htm文件中的head区需要添加如下代码：其中 1000 就是你要设置的时间。setTimeout("self.close()",1000)========================附加相关知识：window.ope...
js3秒或5秒后自动隐藏提示消息
06-03
您可以使用 JavaScript 中的 `setTimeout` 函数来实现这个功能。例如，如果您有一个提示消息的 HTML 元素，您可以使用以下代码来在 3 秒钟后自动隐藏它： ```javascript setTimeout(function() { document.getElementById("提示消息元素的ID").style.display = "none"; }, 3000); // 3000毫秒 = 3秒钟 ``` 同样，如果您想在 5 秒钟后隐藏它，您可以将 `setTimeout` 函数中的时间间隔参数改为 5000 毫秒。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值