jquery实现点击弹出层效果的简单实例


Posted in Javascript onMarch 03, 2014

弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。

效果代码如下:
jquery实现点击弹出层效果的简单实例

在 弹出层 中下面是核心代码

<script type="text/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) });//单击弹出层则自身隐藏});
</script>

完整实例
<!-- 渐变弹出层 -->
<div id="race"><a href="#">点击</a></div>
<div id="racePop" class="raceShow">这里是弹出层效果</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/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) });//单击弹出层则自身隐藏
});
</script>
<style>
body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
/* 渐变弹出层 */
#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;margin:10px auto}
.raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}
</style>
Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jquery实现弹出层完美居中效果
Mar 03 #Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 #Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 #Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 #Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 #Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 #Javascript
js的hasownproperty使用示例
Mar 02 #Javascript
You might like
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
range 标准化之获取
2011/08/28 Javascript
Web开发之JavaScript
2012/03/29 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Python补齐字符串长度的实例
2018/11/15 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
毕业自我评价范文
2013/11/17 职场文书
个人贷款担保书
2014/04/01 职场文书
团日活动总结报告
2014/06/25 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python