`
dotcpp
  • 浏览: 60168 次
  • 性别: 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> 
 

 

 

分享到:
评论

相关推荐

    html5点击弹出自动关闭消息提示框

    3. **自定义消息提示框**:由于`alert()`等内建函数并不支持自动关闭,我们需要自定义一个消息提示框。这通常涉及到创建一个新的HTML元素(如`div`),通过CSS设置样式使其看起来像一个提示框,然后用JavaScript控制...

    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); ...

    jQuery可自动隐藏顶部消息提示框代码

    本项目涉及的是使用jQuery实现一个可自动隐藏的顶部消息提示框插件,该插件具备多种功能,如设定不同类型的提示消息在特定时间后自动消失。 首先,jQuery的选择器和DOM操作是基础。在创建这个提示框插件时,开发者...

    JS实时弹出新消息提示框并有提示音响起的实现代码

    实现这一功能主要依靠JavaScript(JS)和AJAX技术,以及音频播放和动态显示新消息提示框的方法。 知识点一:AJAX技术 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能向服务器...

    封装一个Ext消息提示框,显示几秒后自动消失

    该资源主要涵盖了 CSS 和 JavaScript 代码,旨在实现一个可以自动消失的消息提示框。 1. CSS 代码分析 在 CSS 代码中,我们可以看到一些重要的样式定义。例如,`.msg-box-mc` 类定义了字体大小为 14px 的样式,`....

    javascript消息提示框(仿QQ,可自定义修改)

    2. **关闭功能**:用户可以选择在一定时间后自动关闭提示框,或者提供一个手动关闭的按钮,提高用户体验。 3. **询问功能**:除了简单的信息展示,还可以创建具有“是”和“否”选项的询问框,以便用户进行确认操作...

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

    本文将详细讲解如何使用基于jQuery的Tips插件,该插件允许提示框自动消失或由用户手动消失,从而为用户提供更加友好的交互体验。 首先,我们来了解jQuery Tips插件的基本概念。Tips插件主要用于在网页上显示临时...

    js jquery 非阻塞式 消息提示框

    在JavaScript和jQuery的世界里,创建非阻塞式的消息提示框是一种优化用户体验的重要技术。传统的`alert()`函数在显示消息时会阻塞整个页面的交互,直到用户点击“确定”按钮,这种方式在某些场景下并不理想,因为它...

    css3可定时关闭的消息提示框插件

    **CSS3可定时关闭的消息提示框插件** 在网页开发中,消息提示框是一种常见的交互元素,用于向用户展示信息、警告或确认操作。这款基于CSS3的消息提示框插件提供了一种新颖且灵活的方式,使得提示框不仅具有美观的...

    消息提示框 js ajax

    本文将深入探讨如何使用JavaScript(JS)和Ajax技术来创建一款类似于QQ弹窗的炫酷消息提示框。 首先,我们来了解JavaScript(JS)。JavaScript是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发。它主要...

    ExtJs消息提示框

    在ExtJs中,消息提示框(Notification)是用户界面交互的一个重要元素,它能够向用户显示各种类型的通知信息,如警告、确认、信息提示等。 在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中...

    一个自动缩放的JS提示框

    综上所述,这个自动缩放的JS提示框是一个使用JavaScript编写的动态提示组件,它可以自动调整大小以适应显示的内容,并可能带有自定义的视觉效果和高度可配置的选项。实现这一功能的核心在于JavaScript代码,特别是`...

    js提示框制作js文字提示框,js图片提示框

    1. **基本的JavaScript提示框:alert()** JavaScript 提供了 `alert()` 函数,用于弹出一个带有单一按钮的警告对话框,通常用于简单的信息提示。例如: ```javascript alert("这是一条文字提示信息!"); ``` 这...

    jQuery顶部可关闭提示框代码

    // 示例:2秒后自动关闭提示框 setTimeout(hideAlert, 2000); }); ``` `顶部提示框`的实现主要是CSS布局方面的技巧,通常会使用绝对定位(`position: absolute`)和固定定位(`position: fixed`)来将其置于页面...

    使用JAVASCRIPT实现弹出框,过一段时间自动消失.txt

    定时器与自动关闭机制 在`popshow()`函数中,通过`setTimeOut`设置了一个名为`mytime`的定时器,用于控制弹出框的持续显示时间。当`popTop`超过1160时,触发`closemsg()`函数,清除定时器并隐藏弹出框,实现了弹出...

    JS实现自动消息弹出框

    在JavaScript(JS)中,实现自动消息弹出框是一项常见的任务,这通常涉及到网页的交互性和用户体验。消息弹出框可以用于提示用户信息、警告、确认操作或接收用户输入。以下是一个详细的步骤来阐述如何使用JavaScript...

    网页右下角弹出消息的JS提示框

    根据给定的信息,本文将详细解释一个通过纯JavaScript技术实现在网页右下角显示提示框的方法。该技术可用于实现类似于CSDN网站右下角的消息提示功能。 ### 知识点解析 #### 1. 理解 `CLASS_MSN_MESSAGE` 类 `...

    bootstrap提示框定时消失

    Bootstrap 提示框定时消失是网页动态效果的一种常见应用,它为用户提供了一种优雅的方式来显示信息、警告或错误,而这些信息会在一定时间后自动消失,无需用户手动关闭。这种功能通常借助于 JavaScript 库,如 ...

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

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

    popup.js实现弹出消息提示框效果

    在JavaScript的世界里,创建弹出消息提示框是常见的交互设计之一。`popup.js`就是用于实现这一功能的脚本文件。在本篇文章中,我们将深入探讨如何使用`popup.js`来创建具有用户友好的弹出消息提示框效果,并通过代码...

Global site tag (gtag.js) - Google Analytics