<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<br><br><br><br><br><br><br><br>
<input id='test'>
<br><br><br><br><br><br><br><br>
<a href='#' id='test2' onmouseover="tips.show('普通链接或按钮提示-灰色-鼠标离开消失-300像素', 'test2', null, '#000000', 300)" onmouseout="tips.hidden('test2')">普通链接或按钮提示</a>
<script>
//提示消息类
var tips = {
temp : {},
/***
* 弹出提示
*
* @param string msg 提示文字内容
* @param string id 要弹出提示的目标对象的id,如果id错误/null/false/0则主窗口弹出
* @param int time 定时消失时间毫秒数,如果为null/0/false则不定时
* @param string color 提示内容的背景颜色格式为#000000
* @param int width 提示窗宽度,默认300
*/
show : function(msg, id, time, color, width)
{
var target = this._get(id);
if(!target) { id = 'window'; }
//如果弹出过则移除重新弹出
if(this._get(id+'_tips')) { this.remove(id); }
//设置默认值
msg = msg || 'error';
color = color || '#ea0000';
width = width || 300;
time = time ? parseInt(time) : false;
if(id=='window') {
var y = document.body.clientHeight/2+document.body.scrollTop;
var x = (document.body.clientWidth-width)/2;
var textAlign = 'center', fontSize = '15',fontWeight = 'bold';
} else {
//获取对象坐标信息
for(var y=0,x=0; target!=null; y+=target.offsetTop, x+=target.offsetLeft, target=target.offsetParent);
var textAlign = 'left', fontSize = '12',fontWeight = 'normal';
}
//弹出提示
var tipsDiv = this._create({display:'block',position:'absolute',zIndex:'1001',width:(width-2)+'px',left:(x+1)+'px',padding:'5px',color:'#ffffff',fontSize:fontSize+'px',backgroundColor:color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_text', innerHTML:msg, onclick:function(){tips.hidden(id);}});
document.body.appendChild(tipsDiv);
tipsDiv.style.top = (y-tipsDiv.offsetHeight-12)+'px';
document.body.appendChild(this._create({display:'block',position:'absolute',zIndex:'1000',width:(width+10)+'px',height:(tipsDiv.offsetHeight-2)+'px',left:x+'px',top:(y-tipsDiv.offsetHeight-11)+'px',backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_bg'}));
if(id!='window') {
var arrow = this._create({display:'block',position:'absolute',overflow:'hidden',zIndex:'999',width:'20px',height:'10px',left:(x+20)+'px',top:(y-13)+'px'}, {id:id+'_arrow'});
arrow.appendChild(this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px solid '+color,borderRight:'10px solid #fff', borderLeft:'10px solid #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'}));
document.body.appendChild(arrow);
}
//标记已经弹出
this.temp[id] = id;
//如果定时关闭
if(time) { setTimeout(function(){tips.hidden(id);}, time) }
return id;
},
/***
* 隐藏提示
*
* @param string id 要隐藏提示的id,如果要隐藏主窗口提示id为window,如果要隐藏所有提示id为空即可
*/
hidden : function(id)
{
if(!id) { for(var i in this.temp) { this.hidden(i); } return; }
var t = this._get(id+'_text'), d = this._get(id+'_bg'), a = this._get(id+'_arrow');
if(t) { t.parentNode.removeChild(t); }
if(d) { d.parentNode.removeChild(d); }
if(a) { a.parentNode.removeChild(a); }
},
_create : function(set, attr)
{
var obj = document.createElement('div');
for(var i in set) { obj.style[i] = set[i]; }
for(var i in attr) { obj[i] = attr[i]; }
return obj;
},
_get : function(id)
{
return document.getElementById(id);
}
};
window.onload = function(){
tips.show('主窗口提示-绿色-不定时-300像素', null, null, '#009900', 300);
tips.show('表单报错提示-红色-3000毫秒消失-250像素', 'test', 3000, '#ea0000', 250);
}
document.onclick = function(){
tips.hidden();
}
</script>
相关推荐
NULL 博文链接：https://selfly.iteye.com/blog/1356040
漂亮js表单验证提示效果,表单验证，很漂亮的。
鼠标移动到文字上，特定显示圆角提示内容
之前我们介绍过一款外观还不错的jQuery/CSS3内置关闭按钮的...今天要分享的是一款基于JavaScript的信息提示插件Notyf，你可以随时触发信息提示事件，插件可以帮助你在页面右下角弹出信息提示框，并自动关闭，非常实用。
jQuery CSS3实现动态提示信息条是一款提示信息从页面顶端滑下，界面非常漂亮大方，可用于表单提交时的提示信息。
很漂亮的仿QQ界面的JavaScript提示框组件，用JS写的，很漂亮，压缩包中含有调用实例，以及多种样式的信息提示框，彻底扔掉JS的ALERT提示窗口。
网页中的提示框在用户交互过程中扮演着非常重要的角色，消息提示框分为警告消息...今天要介绍的这款JavaScript消息提示框的功能非常强大，我们可以通过配置非常轻松的实现各种消息提示框，而且消息框的皮肤也比较漂亮。
分别为消息提示、成功信息、错误信息、询问信息。 5、弹出消息框时屏蔽页面其它元素的操作，自动隐藏页面select及iframe下select（无限级select隐藏），并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态...
漂亮jQuery信息提示插件气泡提示插件webui-popover，功能强大的JS特效插件，支持自定义位置 显示，自定义关闭按钮，自定义是否显示标题，自定义是否显示箭头，支持IFRAME加载页面，功能 非常不错，值得使用。
摘要:脚本资源,jQuery,动态提示插件 jquery.notice.js 动态提示信息插件，鼠标点击文字，上方会淡出一个提示框效果，很漂亮的提示框，过一会会自动消失，这是使用jquery.notice.js提示框插件实现的效果，本代码可...
获取基本的提示信息 prompt入门很容易。 让我们看一下examples/simple-prompt.js ： var prompt = require ( 'prompt' ) ; // // Start the prompt // prompt . start ( ) ; // // Get two properties from ...
博客：《好看的alert弹窗或样式弹窗》文章中所涉及到js和css
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上...
在需要显示的页面中插入代码 [removed][removed] QQ号码以及提示信息请在qq.js中修改。1.html是演示文件 超级漂亮的QQ悬浮窗代码，右悬浮
信息提示弹出层插件是一款漂亮实用的信息提示弹出层插件，多种提示功能，小巧好用，带遮罩效果。
<script type="text/javascript" src="Dialog.js"> <script type="text/javascript"> function $(ele) { if (typeof(ele) == 'string'){ ele = document.getElementById(ele) if(!ele){ return null; } } ...
控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加 详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在...
toastr是非阻塞通知的JavaScript库，基于jQuery，是一款简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。
摘要:脚本资源,HTML,... 双击启动.htm 由于本地运行js会提示安全信息的黄条 请单击选择“允许阻止的内容 ” 2. 接下来会得到一个全屏窗口 继续选择“允许阻止的内容 ” 就启动了抽奖系统。 3. 运行过程中 “空格
4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...