/** 
* 浮动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显示提示信息并自动隐藏的更多相关文章

  1. 基于JQuery的浮动DIV显示提示信息并自动隐藏

    /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...

  2. div显示提示信息

    div显示提示信息 <body> <style type="text/css"> a.link{position:relative;} a.link div ...

  3. div显示提示信息【转】

    div显示提示信息 <body> <style type="text/css"> a.link{position:relative;} a.link div ...

  4. JQuery判断div(控件)是否为隐藏

    以下是JavaScript 中判断div是否为隐藏代码引用片段: if (div.style.display == "none") { div.style.display = &q ...

  5. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使用jquery点击一个实现button或连接,进行以下div显示,在点击隐藏

    jquery代码: <script type="text/javascript" src="js/jquery-1.7.2.js"></scr ...

  7. jQuery 点击显示再次点击隐藏

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  8. HTML 最简单的tips 怎么支持指定DIV显示提示信息

    <body> <style type="text/css"> a.link{position:relative;} a.link div.tips{ bor ...

  9. jquery 浮动 固定显示

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>无标题文档 我爱b ...

随机推荐

  1. Cesium经纬度

    computed: { handler() { return new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas) } } ...

  2. 【leetcode】980. Unique Paths III

    题目如下: On a 2-dimensional grid, there are 4 types of squares: 1 represents the starting square.  Ther ...

  3. 楼房重建 (rebuild)

    楼房重建 (rebuild) 题目描述 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子.为了简化问题 ...

  4. 常用跨域方法总结(2)——CORS

    常用跨域方法总结(2)--CORS 上篇文章介绍了几种常用的跨域方法:常用跨域方法总结,本片为上一篇的补充,对比较重要的Cross Origin Resource Sharing详细介绍. CORS ...

  5. HTML5: HTML5 WebSocket

    ylbtech-HTML5: HTML5 WebSocket 1.返回顶部 1. HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 ...

  6. (55)C# windows 消息

    窗体捕获消息 namespace WindowsFormsApp1 { public partial class Form1 : Form { public Form1() { InitializeC ...

  7. upc组队赛7 Slimming Plan

    Slimming Plan 题目描述 Chokudai loves eating so much. However, his doctor Akensho told him that he was o ...

  8. Django框架(二十一)—— Django rest_framework-权限组件

    目录 Django rest_framework-权限组件 一.权限组件的使用 1.使用语法 2.全局使用.局部使用.局部禁用权限 二.源码分析 1.Book中没有as_view 2.APIView的 ...

  9. 使用 C++ 编写的基础 Windows 服务 (CppWindowsService)

    最近项目中涉及到使用C++写一个后台服务程序,找了很多资料,还是使用Google搜索找到了比较详细点的资料,就是从微软官方MSDN的例子,如下: 使用 C++ 编写的基础 Windows 服务 (Cp ...

  10. leetcode.矩阵.73矩阵置零-Java

    1. 具体题目 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: 输出:[ [  [1,1,1],  [1,0,1],  [ ...