//自动关闭提示框
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" onsubmit="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>
分享到:
相关推荐
因此简单用div写了一个alert提示框,并自动关闭。 效果图 css样式 /*弹出消息对话框样式*/ .show_alert_box{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:rgba(0,0,0,0.6); ...
Tips 基于jQuery的提示框插件,可自动消失可手动消失
Js封装版网页提示框插件,这里面是一些前端开发常用的提示框插件,比如Alert警告框、Confirmation弹出确认框、Prompt带输入内容的确认框、Custom Popup自定义的弹出消息框、Auto Close自动关闭的弹出框、Async ...
组件说明:在web开发中,对于浏览器默认的消息提示框(如alert,confirm等)外观无法控制,为了实现更好的界面效果,于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 ==================...
这里介绍的JavaScript自动弹出窗口并自动关闭窗口,JS实现此特效似乎很简单,打开网页后即显示一个弹出窗口,之后会自动离开,使用了window.open和document.open();以及document.close();对象共同来实现,现在似乎用...
主要介绍了JS实现定时自动关闭DIV层提示框的方法,可实现加载时载入js代码控制div层提示框自动关闭的效果,非常简单实用,需要的朋友可以参考下
如:<script type="text/javascript" src="ymPrompt.js"></script> 2、在页面中引入对应的皮肤文件的CSS,如: 3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 页面的js中通过ymPrompt....
基于crip-vue-notice增加了点击消息...2,支持自动关闭和点击关闭,放了关闭监听函数和点击消息框监听函数,放在增加后续行为; 3,放了获取消息和更新消息状态的请求示例; 4,弹框组件挂载全局,不受页面跳转影响。
在web开发中,经常用到一次性消息提示网页,为了提高用户体验,此类网页需要在存留一定时间后自动关闭,并且一般的window.close()关闭代码会使浏览器弹出询问框,此例解决了该问题。
因为日常的需要,TITLE或ALT属性不能满足我的开发需要,也不能对提示框外观进行修改,故而自己写了个提示框,纯JS调用简单,比写CSS快捷,希望大家喜欢 关闭本来打算鼠标移开监听目标就关闭的,但是我希望可以利用...
之前我们介绍过一款外观还不错的jQuery/CSS3内置关闭按钮的...今天要分享的是一款基于JavaScript的信息提示插件Notyf,你可以随时触发信息提示事件,插件可以帮助你在页面右下角弹出信息提示框,并自动关闭,非常实用。
组件说明:在web开发中,对于浏览器默认的消息提示框(如alert,confirm等)外观无法控制,为了实现更好的界面效果,于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 ==================...
原理:使用js的定时任务函数setInterval设置时间,然后触发关闭事件 参数说明 title:提示框的标题 msg:提示信息内容 ico:显示的提示信息图标,’info’,’warnning’,’error’等 函数体 function alert_auto...
5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() 5.2.6 Ext.MessageBox....
仿Mac弹出消息提示jQuery插件是一款jQuery基于Bootstrap制作MAC苹果系统的右上角弹出消息提示框,支持自动关闭提示消息插件。
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
打开一个窗口在一定的时间内自动关闭.htm 只在关闭窗口的时候提示,刷新的时候不提示.htm 离开时转跳到指定网址.htm 随同主窗口同时弹出的附加小窗口.htm 卷动公告窗口.htm 限时广告窗口.htm 表格或层往下慢慢展开的...
6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并关闭后该select仍保持隐藏状态,而只显示原本显示的select。 7、消息组件弹出时屏蔽除Tab和回车外的几乎所有键盘操作(包括F5)...