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 相关文章推荐
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
JavaScript类库D
Oct 24 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
使用socket.io实现简单聊天室案例
Jan 02 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
京东优选小程序的实现代码示例
2020/02/25 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
法律进机关实施方案
2014/03/12 职场文书
副总经理任命书
2014/06/05 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
旅游安全责任协议书
2016/03/22 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
Python实现简单的猜单词
2021/06/15 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
Golang连接并操作MySQL
2022/04/14 MySQL