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 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
js简单抽奖代码
Jan 16 Javascript
javascript 实现 原路返回
Jan 21 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
js自制图片放大镜功能
Jan 24 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
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
10个实用的PHP代码片段
2011/09/02 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python数据可视化之画图
2019/01/15 Python
Python numpy数组转置与轴变换
2019/11/15 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
函授自我鉴定范文
2014/02/06 职场文书
干部作风建设心得体会
2014/10/22 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技