提示不难做，那个三角号样式很难调兼容，死了好多脑细胞预览主窗口提示错位，保存本地测比较好。
兼容性已经测过：IE6\IE7\IE8\FF3\CHROME10
代码如下:
<!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,如果要www.3ppt.com隐藏主窗口提示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>
分享到：
相关推荐
43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容...
为了实现一个在网页右下角动态显示“未读信息”的效果弹窗，我们可以通过使用JavaScript和CSS样式来达到这一目的。整个过程主要分为以下几个知识点： 1. **HTML结构**：首先需要一个HTML容器来作为弹窗的基础结构。...
晋城市-晋城市-街道行政区划_140500_Shp数据-wgs84坐标系.rar
内容概要：本文档汇总了46个经典的Linux面试题及其答案，涵盖了Linux系统操作的基本命令和概念。内容涉及路径表示与目录切换、进程管理、文件和目录操作、权限设置、文件内容查看等多个方面。每个问题都给出了明确的答案，旨在帮助面试者全面掌握Linux命令行操作技能，同时加深对Linux系统原理的理解。 适合人群：准备Linux相关职位面试的求职者，尤其是有一定Linux基础但缺乏实战经验的技术人员。 使用场景及目标：①用于个人自学或面试前复习，巩固Linux基础知识；②作为企业内部培训资料，帮助员工提升Linux操作水平；③为初学者提供系统化的学习指南，快速入门Linux命令行操作。 其他说明：文档内容侧重于实际操作命令的讲解，对于每个命令不仅提供了基本语法，还解释了具体应用场景，有助于读者更好地理解和记忆。建议读者在学习过程中多加练习，将理论知识转化为实际操作能力。
街道级行政区划shp数据，wgs84坐标系，直接下载使用。
内容概要：本文提供了10道华中杯C++竞赛真题的详细解析，涵盖多种基础编程技能与高级特性。每道题目不仅包含详细的解题思路和代码实现，还附带了完整的运行结果。具体包括：函数参数传递（指针实现）、宏定义比较、数组元素打印、几何图形面积计算、字符串拼接、素数判断、多态的实现、文件操作、简单计算器和学生信息管理。这些题目帮助读者深入理解C++语言的核心概念和技术应用。 适合人群：对C++有一定了解的编程初学者和中级开发者，尤其是准备参加编程竞赛的学生或程序员。 使用场景及目标：①作为编程练习和竞赛备考资料，帮助读者掌握C++的基本语法和常用算法；②通过实际代码示例加深对C++特性的理解，如指针、宏定义、面向对象编程等；③提供完整的源码供读者参考和调试，增强动手能力和问题解决能力。 阅读建议：建议读者按照题目难度逐步学习，先理解题目背景和解题思路，再仔细研读代码实现，并尝试独立编写和调试代码。同时，鼓励读者扩展思考，探索更多可能的解决方案，以提高编程水平。
街道级行政区划shp数据，wgs84坐标系，直接使用。
街道级行政区划shp数据，wgs84坐标系，直接使用。
通用计算器的设计FPGA.doc
晋城市-沁水县-街道行政区划_140521_Shp数据-wgs84坐标系.rar
赤峰市-松山区-街道行政区划_150404_Shp数据-wgs84坐标系.rar
JAVA中Stream编程常见的方法分类
街道级行政区划shp数据，wgs84坐标系，直接使用。
大同市-浑源县-街道行政区划_140225_Shp数据-wgs84坐标系.rar
包头市-昆都仑区-街道行政区划_150203_Shp数据-wgs84坐标系.rar
街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用
街道级行政区划shp数据，wgs84坐标系，直接下载使用。
内容概要：本文详细介绍了车载电子电器架构中的网络拓扑开发，涵盖开发概述、车载网络总线、网络设计原则、开发流程及小结。网络拓扑开发是汽车电气架构中的重要环节，旨在设计合理的网络结构以确保各电子控制单元（ECU）之间的高效通信。文中阐述了通信协议选择、网络节点布局、通信介质选择、拓扑结构设计及安全性考虑等关键要素，并强调了仿真与验证的重要性。此外，还讨论了网络设计的原则，如前瞻性、兼容性、拓展性、实时性、可靠性和安全性，以及网络负载的优化措施。最后，总结了网络拓扑开发的流程，包括需求分析、设计、仿真验证、优化迭代及文档记录。 适合人群：汽车电子工程师、各域功能工程师、子系统及零部件开发者、测试工程师等从事汽车电气架构开发的相关人员。 使用场景及目标：①帮助工程师理解汽车网络拓扑开发的关键步骤和技术要点；②指导工程师在设计过程中遵循科学合理的设计原则，确保网络拓扑的高性能和可靠性；③提供网络负载优化的措施，确保数据传输的实时性和效率。 其他说明：网络拓扑开发不仅需要考虑技术层面的因素，还需兼顾成本效益，以适应不断变化的市场需求和技术趋势。本文建议读者在实践中不断积累经验，关注新技术的应用和发展，以应对未来的挑战和机遇。
内容概要：本文探讨了智能分析AI Agent在金融行业的先进实践与展望，指出金融行业在经营分析领域面临的现状和痛点，包括管理团队无法快速获得深度结论，业务团队面对BI产品学习门槛高、依赖人工等问题。文中介绍了智能分析AI Agent相较于传统解决方案的技术创新，如数据建模右移、基于虚拟层的数据编织、指标平台与大模型组合方案等，强调其在降低使用门槛、提高效率和增强交互性方面的优势。同时，文章展示了智能分析AI Agent在交互式指标问询、自动分析报告生成等应用场景中的价值，并对未来的发展进行了展望。 适合人群：金融行业的管理层、业务分析师、数据科学家以及对金融科技感兴趣的从业者。 使用场景及目标：①帮助管理层快速获取数据背后的深层次原因和结论；②降低业务团队使用数据分析工具的门槛，提高工作效率；③实现数据的自动化处理和分析，减少人工干预；④推动企业内部的数据民主化，使更多员工能够参与数据分析和决策。 阅读建议：本文不仅提供了智能分析AI Agent的技术细节，还结合实际案例展示了其应用效果，因此在阅读过程中应重点关注技术创新点及其对企业管理和业务流程的具体影响。