<!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>
相关推荐
标题中的“漂亮的js提示信息效果”指的是在网页中使用JavaScript实现的一种美观且具有交互性的提示信息展示方式。这种效果可以是通知、警告、确认对话框或者是其他形式的信息提示，为用户提供更加直观和友好的用户...
标题中的“非常漂亮的轻量级提示信息框JS代码”指的是一个JavaScript实现的代码库，它设计用于在网页中创建美观且轻便的提示信息框。这类提示框通常用于向用户展示一些额外的信息，比如帮助文本、警告消息或者交互...
在这个“非常漂亮的JS提示框”主题中，我们主要探讨的是如何利用JS实现一个既美观又实用的提示框，并解决在不同浏览器中，特别是IE6中的兼容性问题。 提示框是用户界面中常见的一种元素，通常用于显示警告、确认...
总的来说，这个项目为网页开发者提供了一套美观且可定制的JavaScript提示框解决方案，通过引入相应的JS文件并设置主题，可以轻松提升网站的用户体验。通过阅读和理解提供的代码，开发者可以进一步自定义这些提示框，...
这些提示框可以包含多种样式，如警告、信息、成功、错误等，并且支持自定义按钮、动画效果、关闭时间、回调函数等功能，使得提示信息更加人性化和高效。 在"好用的漂亮提示框,js提示框"中，我们可以推测这可能是一...
本篇将介绍一个仿QQ界面的JS提示框组件，它旨在提升网页应用中的提示信息展示效果。 这个组件的核心目标是模仿QQ应用程序中的对话框样式，提供一种更加吸引人的视觉体验。在设计上，它可能包括更细腻的动画效果、可...
本篇文章将详细探讨“腾讯UED-漂亮的提示信息，仿QQ空间Loading提示”这一主题，以及与之相关的jQuery Loading提示技术。 首先，我们来理解一下"Loading提示"。在用户进行数据加载或者页面跳转时，为了提供良好的...
为了设计出漂亮的提示信息条，我们需要创建一个CSS类，包含必要的布局和样式。这可能包括背景颜色、边框、文字样式、阴影效果以及提示信息条的高度和宽度。例如： ```css .tooltip { position: fixed; top: 0; ...
"纯js漂亮各种弹出框"这个主题聚焦于如何利用JavaScript创建美观且功能丰富的弹出提示框和对话框。这些功能通常用于通知用户、获取用户输入或者展示详细信息，提升用户体验。 1. **基本弹出框**： JavaScript提供...
"漂亮js表单验证提示效果"是一个专注于提供美观、友好的表单验证解决方案的资源。这个压缩包可能包含一个或多个JavaScript文件，用于实现这些动态的验证提示效果。 首先，我们需要理解JavaScript表单验证的基本原理...
在这个场景下，"漂亮的js jquery ajax对话提示框"扮演着重要的角色，它可以在用户执行操作后（如提交表单或触发某些事件）提供美观且动态的反馈。 **一、jQuery 对话框** `jQuery UI` 的 `Dialog` 插件是创建...
之前我们介绍过一款外观还不错的jQuery/CSS3内置关闭按钮的...今天要分享的是一款基于JavaScript的信息提示插件Notyf，你可以随时触发信息提示事件，插件可以帮助你在页面右下角弹出信息提示框，并自动关闭，非常实用。
"非常漂亮的JS弹出对话框"这个主题，主要涉及到如何利用JavaScript创建美观且功能丰富的对话框。 首先，我们了解JavaScript内置的三种基本对话框：`alert()`, `prompt()`, 和 `confirm()`。 1. **alert()** - 这个...
此外，该组件还支持自定义配置，包括文字颜色、背景颜色、边框样式、动画效果等，让开发者能够打造出独具特色的提示信息。 在HTML中集成ymPrompt提示框非常简单。首先，你需要在页面中引入ymPrompt的相关CSS和...
当我们谈论“超级漂亮的js弹出框效果”时，我们通常是指利用JavaScript实现的对话框或者提示框，这些弹出框不仅具备基本功能，还通过美观的设计提升了用户体验。在本文中，我们将深入探讨如何使用JavaScript创建具有...
总的来说，这个项目结合了CSS和JavaScript的力量，为用户提供了一种优雅的方式来显示图片的相关提示信息。这种技术可以应用于多种场景，如产品介绍、图片注解、用户体验优化等，提升网站的互动性和吸引力。了解和...
本实例是基于JavaScript实现的一个“超漂亮的仿腾讯弹出层效果”，旨在为开发者提供一个美观且实用的弹出层解决方案。下面我们将详细探讨这个实例中涉及的技术点。 首先，我们来分析“仿腾讯弹出层效果”这一概念。...
这个功能在网页设计中十分常见，例如用于提示信息、展示详细内容或进行用户确认操作。 首先，我们来了解一下JS弹出框的基本概念。在JavaScript中，有几种常见的弹出框：`alert()`、`prompt()`和`confirm()`。这些...
对话框是用户界面的重要组成部分，可以用于提示信息、确认操作或接收用户输入。本主题聚焦于"JS弹出漂亮对话框"，这涉及到利用纯JavaScript技术创建美观且功能丰富的对话框插件。 首先，我们要理解JavaScript的原生...
这个JS组件借鉴了QQ的界面风格，将这种设计语言引入到Web开发中，为开发者提供了一种方法，使他们能够用更加吸引人的提示信息替代传统的JavaScript `alert()`函数。`alert()`虽然功能实用，但其默认样式往往显得单调...