//自动关闭提示框
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>
分享到:
相关推荐
3. **自定义消息提示框**:由于`alert()`等内建函数并不支持自动关闭,我们需要自定义一个消息提示框。这通常涉及到创建一个新的HTML元素(如`div`),通过CSS设置样式使其看起来像一个提示框,然后用JavaScript控制...
因此简单用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的选择器和DOM操作是基础。在创建这个提示框插件时,开发者...
实现这一功能主要依靠JavaScript(JS)和AJAX技术,以及音频播放和动态显示新消息提示框的方法。 知识点一:AJAX技术 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能向服务器...
该资源主要涵盖了 CSS 和 JavaScript 代码,旨在实现一个可以自动消失的消息提示框。 1. CSS 代码分析 在 CSS 代码中,我们可以看到一些重要的样式定义。例如,`.msg-box-mc` 类定义了字体大小为 14px 的样式,`....
2. **关闭功能**:用户可以选择在一定时间后自动关闭提示框,或者提供一个手动关闭的按钮,提高用户体验。 3. **询问功能**:除了简单的信息展示,还可以创建具有“是”和“否”选项的询问框,以便用户进行确认操作...
本文将详细讲解如何使用基于jQuery的Tips插件,该插件允许提示框自动消失或由用户手动消失,从而为用户提供更加友好的交互体验。 首先,我们来了解jQuery Tips插件的基本概念。Tips插件主要用于在网页上显示临时...
在JavaScript和jQuery的世界里,创建非阻塞式的消息提示框是一种优化用户体验的重要技术。传统的`alert()`函数在显示消息时会阻塞整个页面的交互,直到用户点击“确定”按钮,这种方式在某些场景下并不理想,因为它...
**CSS3可定时关闭的消息提示框插件** 在网页开发中,消息提示框是一种常见的交互元素,用于向用户展示信息、警告或确认操作。这款基于CSS3的消息提示框插件提供了一种新颖且灵活的方式,使得提示框不仅具有美观的...
本文将深入探讨如何使用JavaScript(JS)和Ajax技术来创建一款类似于QQ弹窗的炫酷消息提示框。 首先,我们来了解JavaScript(JS)。JavaScript是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发。它主要...
在ExtJs中,消息提示框(Notification)是用户界面交互的一个重要元素,它能够向用户显示各种类型的通知信息,如警告、确认、信息提示等。 在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中...
综上所述,这个自动缩放的JS提示框是一个使用JavaScript编写的动态提示组件,它可以自动调整大小以适应显示的内容,并可能带有自定义的视觉效果和高度可配置的选项。实现这一功能的核心在于JavaScript代码,特别是`...
1. **基本的JavaScript提示框:alert()** JavaScript 提供了 `alert()` 函数,用于弹出一个带有单一按钮的警告对话框,通常用于简单的信息提示。例如: ```javascript alert("这是一条文字提示信息!"); ``` 这...
// 示例:2秒后自动关闭提示框 setTimeout(hideAlert, 2000); }); ``` `顶部提示框`的实现主要是CSS布局方面的技巧,通常会使用绝对定位(`position: absolute`)和固定定位(`position: fixed`)来将其置于页面...
定时器与自动关闭机制 在`popshow()`函数中,通过`setTimeOut`设置了一个名为`mytime`的定时器,用于控制弹出框的持续显示时间。当`popTop`超过1160时,触发`closemsg()`函数,清除定时器并隐藏弹出框,实现了弹出...
在JavaScript(JS)中,实现自动消息弹出框是一项常见的任务,这通常涉及到网页的交互性和用户体验。消息弹出框可以用于提示用户信息、警告、确认操作或接收用户输入。以下是一个详细的步骤来阐述如何使用JavaScript...
根据给定的信息,本文将详细解释一个通过纯JavaScript技术实现在网页右下角显示提示框的方法。该技术可用于实现类似于CSDN网站右下角的消息提示功能。 ### 知识点解析 #### 1. 理解 `CLASS_MSN_MESSAGE` 类 `...
Bootstrap 提示框定时消失是网页动态效果的一种常见应用,它为用户提供了一种优雅的方式来显示信息、警告或错误,而这些信息会在一定时间后自动消失,无需用户手动关闭。这种功能通常借助于 JavaScript 库,如 ...
Js封装版网页提示框插件,这里面是一些前端开发常用的提示框插件,比如Alert警告框、Confirmation弹出确认框、Prompt带输入内容的确认框、Custom Popup自定义的弹出消息框、Auto Close自动关闭的弹出框、Async ...
在JavaScript的世界里,创建弹出消息提示框是常见的交互设计之一。`popup.js`就是用于实现这一功能的脚本文件。在本篇文章中,我们将深入探讨如何使用`popup.js`来创建具有用户友好的弹出消息提示框效果,并通过代码...