css:

[css]#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;}
.raceShow{border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}[/css]

js:

[javascript]$(document).ready(function(){
var speed = 600;//动画速度
$(“#race a”).click(function(event){//绑定事件处理
event.stopPropagation();
var offset = $(event.target).offset();//取消事件冒泡
$(“#racePop”).css({ top:offset.top + $(event.target).height() + “px”, left:offset.left });//设置弹出层位置
$(“#racePop”).show(speed);//动画显示
});
$(document).click(function(event) { $(“#racePop”).hide(speed) });//单击空白区域隐藏
$(“#racePop”).click(function(event) { $(“#racePop”).hide(speed) });//单击弹出层则自身隐藏
});
[/javascript]

jQuery渐变弹出层的更多相关文章

  1. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  3. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  4. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  5. jquery 简单弹出层

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...

  6. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  7. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  8. jquery智能弹出层,自己主动推断位置

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

  9. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

随机推荐

  1. MySql高效分页SQL

    public string GetQuerySql(ITSPAreaQueryModel model, object state = null) { ); sqlBuilder.AppendForma ...

  2. T - 阿牛的EOF牛肉串(第二季水)

    Description          今年的ACM暑期集训队一共有18人,分为6支队伍.其中有一个叫做EOF的队伍,由04级的阿牛.XC以及05级的COY组成.在共同的集训生活中,大家建立了深厚的 ...

  3. 微信OPENID授权方法

    今天搞了下微信授权, 总结了下微信的授权规则与步骤 先来几个关键字 Openid  微信ip(属于唯一指向公众号的id) redirect_uri  授权回调地址 State 回调地址带参数 Appi ...

  4. url&视图

    django.cof.url.defaults django.cof.url.defaults.patterns() 1 2 3 4 5 6 7 urlpatterns = patterns('', ...

  5. class之cls

    cls代表的是类本身,一般在静态方法中使用

  6. python Tkinter 全屏显示

    #! /usr/bin/env python # -*- coding: utf-8 -*- import Tkinter as tk class FullScreenApp(object): def ...

  7. 新建Android项目的时候,选择SDK的区别

    选择新建一个Android项目时候,出现MiniMum Required SDK.Target SDK.Compile With.Theme,如下所示,分别是什么意思呢? MinMum Require ...

  8. LoadRunner 技巧之THML 与 URL两种录制模式分析

    Loadrunner的Virtual User Generator 提供人脚本的录制功能,对于初学者来说,这大大的降低了编写脚本的门槛,loadrunner提供两种录制脚本的方式:Html_based ...

  9. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  10. IE8对css文件的限制

    很多人在写css时,时常把很多css样式放到一个文件中.也有些框架在上线后,能对很多css文件进行合并.这样能减少对服务器的请求次数,从而加快服务器的响应速度.在IE8中,当css的规则个数大于409 ...