`
dotcpp
  • 浏览: 59504 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

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

阅读更多

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

 

 

分享到:
评论

相关推荐

    js提示框替代系统alert,自动关闭alert对话框的实现方法

    因此简单用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的提示框插件可自动消失可手动消失

    Tips 基于jQuery的提示框插件,可自动消失可手动消失

    Js封装版网页提示框插件.rar

    Js封装版网页提示框插件,这里面是一些前端开发常用的提示框插件,比如Alert警告框、Confirmation弹出确认框、Prompt带输入内容的确认框、Custom Popup自定义的弹出消息框、Auto Close自动关闭的弹出框、Async ...

    漂亮的消息提示框 消息提示组件 Javascript写的

    组件说明:在web开发中,对于浏览器默认的消息提示框(如alert,confirm等)外观无法控制,为了实现更好的界面效果,于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 ==================...

    JavaScript实现自动弹出窗口并自动关闭窗口的方法

    这里介绍的JavaScript自动弹出窗口并自动关闭窗口,JS实现此特效似乎很简单,打开网页后即显示一个弹出窗口,之后会自动离开,使用了window.open和document.open();以及document.close();对象共同来实现,现在似乎用...

    JS实现定时自动关闭DIV层提示框的方法

    主要介绍了JS实现定时自动关闭DIV层提示框的方法,可实现加载时载入js代码控制div层提示框自动关闭的效果,非常简单实用,需要的朋友可以参考下

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    如:&lt;script type="text/javascript" src="ymPrompt.js"&gt;&lt;/script&gt; 2、在页面中引入对应的皮肤文件的CSS,如: 3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 页面的js中通过ymPrompt....

    vue消息弹出框组件需要的文件

    基于crip-vue-notice增加了点击消息...2,支持自动关闭和点击关闭,放了关闭监听函数和点击消息框监听函数,放在增加后续行为; 3,放了获取消息和更新消息状态的请求示例; 4,弹框组件挂载全局,不受页面跳转影响。

    JS网页定时自动关闭-无浏览器提示

    在web开发中,经常用到一次性消息提示网页,为了提高用户体验,此类网页需要在存留一定时间后自动关闭,并且一般的window.close()关闭代码会使浏览器弹出询问框,此例解决了该问题。

    JS仿TITLE/ALT的WEB提示框

    因为日常的需要,TITLE或ALT属性不能满足我的开发需要,也不能对提示框外观进行修改,故而自己写了个提示框,纯JS调用简单,比写CSS快捷,希望大家喜欢 关闭本来打算鼠标移开监听目标就关闭的,但是我希望可以利用...

    漂亮的JavaScript右下角信息提示插件Notyf

    之前我们介绍过一款外观还不错的jQuery/CSS3内置关闭按钮的...今天要分享的是一款基于JavaScript的信息提示插件Notyf,你可以随时触发信息提示事件,插件可以帮助你在页面右下角弹出信息提示框,并自动关闭,非常实用。

    好看好用的alert提示框

    组件说明:在web开发中,对于浏览器默认的消息提示框(如alert,confirm等)外观无法控制,为了实现更好的界面效果,于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 ==================...

    easyUI实现(alert)提示框自动关闭的实例代码

    原理:使用js的定时任务函数setInterval设置时间,然后触发关闭事件 参数说明 title:提示框的标题 msg:提示信息内容 ico:显示的提示信息图标,’info’,’warnning’,’error’等 函数体 function alert_auto...

    精通JS脚本之ExtJS框架.part2.rar

    5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert&#40;&#41; 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插件.zip

    仿Mac弹出消息提示jQuery插件是一款jQuery基于Bootstrap制作MAC苹果系统的右上角弹出消息提示框,支持自动关闭提示消息插件。

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层&lt;/div&gt; 并随页面...

    js特效,各种页面弹出浮动

    打开一个窗口在一定的时间内自动关闭.htm 只在关闭窗口的时候提示,刷新的时候不提示.htm 离开时转跳到指定网址.htm 随同主窗口同时弹出的附加小窗口.htm 卷动公告窗口.htm 限时广告窗口.htm 表格或层往下慢慢展开的...

    消息提示插件(组件说明:用于替代系统默认的灰色对话框(alert等),提供丰富多彩的消息提示皮肤外观)

    6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并关闭后该select仍保持隐藏状态,而只显示原本显示的select。 7、消息组件弹出时屏蔽除Tab和回车外的几乎所有键盘操作(包括F5)...

Global site tag (gtag.js) - Google Analytics