基于jQuery实现点击弹出层实例代码


Posted in Javascript onJanuary 01, 2016

jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏;

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.com" />
<title>子选择器</title>
<style type="text/css">
#choice_list_district{
height:50px;
}
#tab td{
cursor:pointer;
}
#divobj{
position:absolute; 
width:200px; 
height:200px; 
background:blue; 
border:1px solid block; 
display:none; 
z-index:9999;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function (){ 
$("#choice_list_district a").click(function(e){ 
if($("#divobj").css("display")=="none"){ 
e.stopPropagation(); 
var offset=$(e.target).offset(); 
$("#divobj").css({top:offset.top+$(e.target).height()+"px",left:offset.left}); 
$("#divobj").show(); 
} 
else{ 
$("#divobj").hide(); 
} 
}); 
$(document).click(function(event){ 
$("#divobj").hide(); 
}); 
}); 
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="choice_list_district"> <a href="#">出来层</a> </div>
<div id="divobj"></div>
</div>
</form>
</body>
</html>

以上代码中,点击链接可以弹出隐藏的层,再点击任何地方就可以隐藏此层。

本段代码简单易懂,写的不好还请各位大侠见谅,希望本文分享能够给大家带来帮助。

Javascript 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
详解vue.js的devtools安装
May 26 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 #Javascript
详解JavaScript 中的 replace 方法
Jan 01 #Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 #Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 #Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 #Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 #Javascript
常见的javascript跨域通信方法
Dec 31 #Javascript
You might like
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
javascript引导程序
2008/10/26 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
学校后勤人员职责
2013/12/27 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
五年级学生评语
2014/04/22 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
2014年化验员工作总结
2014/11/18 职场文书
后天观后感
2015/06/08 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python