基于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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
详解javascript函数写法大全
Mar 25 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
基于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
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
改进Django中的表单的简单方法
2015/07/17 Python
python制作一个桌面便签软件
2015/08/09 Python
Python实现带百分比的进度条
2016/06/28 Python
使用python+whoosh实现全文检索
2019/12/09 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
公司企业表扬信
2014/01/11 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
英文投诉信格式
2015/07/03 职场文书
2015元旦感言
2015/12/09 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript