基于jQuery实现点击弹出层实例代码
更新时间：2016年01月01日 10:26:51 作者：gogoggo
基于jquery实现点击链接弹出层效果，其基本实现原理是这样的：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；对jq点击弹出层相关知识感兴趣的朋友一起学习吧
jquery实现点击链接弹出层效果：本例实现的主要原理：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net" />
<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>
以上代码中，点击链接可以弹出隐藏的层，再点击任何地方就可以隐藏此层。
本段代码简单易懂，写的不好还请各位大侠见谅，希望本文分享能够给大家带来帮助。
相关文章
这篇文章主要为大家详细介绍了jquery实现图片无缝滚动，蒙版遮蔽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件FusionCharts实现的2D面积图效果,结合完整实例形式分析了FusionCharts绘制2D面积图的完整步骤与相关属性设置操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery应用之jQuery链用法,实例形式分析了jQuery链的原理及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下2015-03-03
jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理
这篇文章主要介绍了jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理的相关资料,需要的朋友可以参考下2015-11-11
本文给大家介绍的是一款移动端下的jQuery插件Hammer.js，他是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件支持各种手机事件，比如缩放，qq左滑动删除，放大，旋转等2015-07-07
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
我在为 Mozilla Developer Network(Mozilla开发者社区) 写代码时需要加载的一个普通的的脚本文件,以及一个JSON流。 因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数2014-04-04
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
这篇文章主要介绍了jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法,涉及jQuery中val与attr方法的使用技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery中的数据缓存$.data的用法及源码完全解析,深入解读了jQuery对缓存对象的读写和移除的实现,需要的朋友可以参考下2016-04-04
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
下面小编就为大家带来一篇jQuery的时间datetime控件在AngularJs中的使用实例(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论