基于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-08-08
这篇文章主要介绍了用jQuery实现的智能隐藏、带滑动效果的返回顶部代码,非常实用,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了jquery插件实现代码雨特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
大家应该都会有这样一种感觉，data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此。下面就来详细深入的学习下jQuery中的data()，感兴趣的朋友们可以参考借鉴。2016-12-12
jQuery是一个优秀的JavaScript框架，可以很好的解决不同浏览器兼容的问题，尤其是在ASP.NET MVC下，它的作用更加的凸显。2009-12-12
这篇文章主要介绍了Jquery实现瀑布流布局的方法,可实现图片的动态加载功能,且代码备有详细注释便于理解,需要的朋友可以参考下2015-07-07
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
jquery代码实现图片渐变切换同时兼容ie6、Chrome、Firefox，想学习的朋友可以测试下，希望对大家有所帮助2013-08-08
详谈jQuery Ajax(load,post,get,ajax)的用法
下面小编就为大家带来一篇详谈jQuery Ajax(load,post,get,ajax)的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
(function($){...})(jQuery)实际上是匿名函数，不懂得朋友可以继续往下看。2010-07-07
用jquery来判断浏览器类型，如果只是仅仅为了判断浏览器的类型而使用该方法,那么不建议使用，只是在你已经使用了jquery才建议使用，因为没必要因为这么小的一个功能就加载那么大的类库吧2012-11-11
最新评论