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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
Prototype RegExp对象 学习
Jul 19 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 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
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
JS跨域代码片段
2012/08/30 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
javascript 实现map集合
2015/04/03 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
python实现音乐下载的统计
2018/06/20 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python ftplib模块使用代码实例
2019/12/31 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
竞选团支书演讲稿
2014/04/28 职场文书
高中校园广播稿
2014/10/21 职场文书
骨干教师个人总结
2015/02/11 职场文书
运动会5000米加油稿
2015/07/21 职场文书
小学生教师节广播稿
2015/08/19 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python