基于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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
用 javascript 实现的点击复制代码
Mar 24 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
php目录管理函数小结
2008/09/10 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
有关php运算符的知识大全
2011/11/03 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP session 会话处理函数
2016/06/06 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
快速入门python学习笔记
2017/12/06 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python字典改变value值方法总结
2019/06/21 Python
python socket 聊天室实例代码详解
2019/11/14 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
盛大笔试题
2016/11/05 面试题
2014年置业顾问工作总结
2014/11/17 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers