JQuery 浮动DIV显示提示信息并自动隐藏
/**
* 浮动DIV定时显示提示信息,如操作成功, 失败等
* @param string tips (提示的内容)
* @param int height 显示的信息距离浏览器顶部的高度
* @param int time 显示的时间(按秒算), time > 0
* @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击</a>
* @sample 上面代码表示点击后显示操作成功3秒钟, 距离顶部100px
* @copyright ZhouHr 2010-08-27
*/
function showTips( tips, height, time ){
var windowWidth = document.documentElement.clientWidth;
var tipsDiv = '<div class="tipsClass">' + tips + '</div>'; $( 'body' ).append( tipsDiv );
$( 'div.tipsClass' ).css({
'top' : height + 'px',
'left' : ( windowWidth / 2 ) - ( tips.length * 13 / 2 ) + 'px',
'position' : 'absolute',
'padding' : '3px 5px',
'background': '#8FBC8F',
'font-size' : 12 + 'px',
'margin' : '0 auto',
'text-align': 'center',
'width' : 'auto',
'color' : '#fff',
'opacity' : '0.8'
}).show();
setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}
原文:http://www.cnblogs.com/showblog/archive/2010/08/27/1810427.html
JQuery 浮动DIV显示提示信息并自动隐藏的更多相关文章
- 基于JQuery的浮动DIV显示提示信息并自动隐藏
/** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...
- div显示提示信息
div显示提示信息 <body> <style type="text/css"> a.link{position:relative;} a.link div ...
- div显示提示信息【转】
div显示提示信息 <body> <style type="text/css"> a.link{position:relative;} a.link div ...
- JQuery判断div(控件)是否为隐藏
以下是JavaScript 中判断div是否为隐藏代码引用片段: if (div.style.display == "none") { div.style.display = &q ...
- jQuery鼠标悬停显示提示信息窗体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用jquery点击一个实现button或连接,进行以下div显示,在点击隐藏
jquery代码: <script type="text/javascript" src="js/jquery-1.7.2.js"></scr ...
- jQuery 点击显示再次点击隐藏
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- HTML 最简单的tips 怎么支持指定DIV显示提示信息
<body> <style type="text/css"> a.link{position:relative;} a.link div.tips{ bor ...
- jquery 浮动 固定显示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>无标题文档 我爱b ...
随机推荐
- Es学习第二课, ES安装和客户端使用
Elasticsearch安装依赖于jdk,所以大家先保证自己电脑安装好Java环境(JDK7或更高版本),并配置好环境变量:这块的配置我就不细讲了,不管是Linux还是Windows,这块的安装和配 ...
- shell脚本编写nginx部署脚本
下面为shell脚本编写的nginx的安装及修改nginx.conf的脚本,脚本比较简单: #!/bin/bash function yum_install(){ yum install epel-r ...
- 最佳实践 | RDS & POLARDB归档到X-Pack Spark计算
X-Pack Spark服务通过外部计算资源的方式,为Redis.Cassandra.MongoDB.HBase.RDS存储服务提供复杂分析.流式处理及入库.机器学习的能力,从而更好的解决用户数据处理 ...
- Struts拦截器Interceptor
Struts2 拦截器 [Interceptor] 拦截器的工作原理如上图,每一个Action请求都包装在一系列的拦截器的内部.拦截器可以在Action执行直线做相似的操作也可以在Action执行直后 ...
- redis-持久化、主从复制、集群
持久化 RDB.AOF(redis.conf) 主从复制 redis.conf 集群 redis-trib.rb.ruby相见如下链接http://www.cnblogs.com/wuxl360/p/ ...
- 2019 TCO Round 1B——[ 状压DP ]
第一题是 EllysSki . 题意:给n个数,求两个方向的最长递减区间. 可以O(n). #include<cstdio> #include<cstring> #includ ...
- 接口测试——postman安装
http://www.jianshu.com/p/dd0db1b13cfc postman的视频终于过审了,https://ke.qq.com/course/229839#tuin=1eb87ef,大 ...
- 响应式web开发的一些文章
CSS Device Adaptation:关注 W3C 建议的 CSS 设备适配标准. “在 CSS 中使用 LESS 实现更多的功能”(作者:Uche Ogbuji,developerWorks, ...
- 使用Emacs来编程
使用Emacs来编程 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} code ...
- html-body标签中相关标签 02
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...