您的位置：首页 > 编程技术 > js  >  基于jQuery实现点击弹出层实例代码

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

 更新时间：2016年1月5日 10:01  点击：2373

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

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://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>

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

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

[!--infotagslink--]

相关文章

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • JS实现响应鼠标点击动画渐变弹出层效果代码

    这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28

  • JavaScript判断按钮被点击的方法

    javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求，今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法，感兴趣的朋友一起学习吧...2015-12-14

  • jq checkbox 的全选并ajax传参的实例

    下面小编就为大家带来一篇jq checkbox 的全选并ajax传参的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-04-03

  • 实例解析jQuery中如何取消后续执行内容

    本文主要介绍了jQuery中取消后续执行内容的实例，代码通俗易懂。需要的朋友来看下吧...2016-12-02

  • 利用JQuery阻止事件冒泡

    冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。本文主要介绍JQuery阻止事件冒泡的实例解析。需要的朋友来看下吧 ...2016-12-02

  • HTML5实现移动端点击翻牌功能

    这篇文章主要介绍了HTML5实现移动端点击翻牌功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-12-08

  • 基于JavaScript实现图片点击弹出窗口而不是保存

    这篇文章主要介绍了基于JavaScript实现图片点击弹出窗口而不是保存的相关资料,需要的朋友可以参考下...2016-02-12

  • DIV+CSS+jQ实现省市联动可扩展

    这篇文章主要介绍了DIV+CSS+jQ实现省市联动可扩展方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下...2016-06-24

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

    基于jquery实现点击链接弹出层效果，其基本实现原理是这样的：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；对jq点击弹出层相关知识感兴趣的朋友一起学习吧...2016-01-05

  • JavaScript代码判断点击第几个按钮

    javascript点击按钮需求，在项目开发过程中经常遇到，本文通过一段代码给大家分享javascript代码判断点击第几个按钮，对本文感兴趣的朋友一起学习吧...2015-12-14

  • jQuery获取当前点击的对象元素(实现代码)

    下面小编就为大家带来一篇jQuery获取当前点击的对象元素(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-05-20

  • jQuery中 bind的用法简单介绍

    bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。这篇文章主要介绍了jQuery中的 bind用法,需要的朋友可以参考下...2017-02-19

  • jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    这篇文章主要介绍了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法,涉及jQuery响应鼠标事件动态改变页面元素样式的功能,需要的朋友可以参考下...2015-12-25

  • chrome下判断点击input上标签还是其余标签的实现方法

    下面小编就为大家带来一篇chrome下判断点击input上标签还是其余标签的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-03

  • 原生js实现弹出层效果

    本文主要介绍了原生js实现弹出层效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23

  • JS模拟按钮点击功能的方法

    这篇文章主要介绍了JS模拟按钮点击功能的方法,结合实例形式分析了JavaScript模拟点击按钮事件的实现技巧,并附带了JavaScript模拟点击链接的实现方法,需要的朋友可以参考下...2015-12-24

  • Js与Jq获取浏览器和对象值的方法

    这篇文章主要介绍了 Js与Jq获取浏览器和对象值的方法的相关资料,需要的朋友可以参考下...2016-03-22

  • js点击返回跳转到指定页面实现过程

    这篇文章主要介绍了js点击返回跳转到指定页面实现过程,需要的朋友可以参考下...2016-04-22

  • JavaScript实现点击按钮直接打印

    很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，下面通过本文给大家介绍JavaScript实现点击按钮就打印的代码，需要的朋友参考下...2016-01-08