js 点击页面其他地方关闭弹出层(示例代码)


Posted in Javascript onDecember 24, 2013
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
<!-- 
*{font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:14px} 
a{color:#039} 
a:hover{color:#f60} 
.pop{position:absolute;left:40%;top:40%;width:300px;height:100px;background:#eee;border:1px solid #ccc} 
.pop_head{position:relative;height:20px;background:#ccc} 
.pop_head a{position:absolute;right:8px;line-height:20px;color:#000;text-decoration:none} 
.pop_head a:hover{color:#f60;text-decoration:none} 
.pop_body{padding:8px} 
--> 
</style> 
</head> 
<body> 
<!--首先设置一个层:--> 
<div id="pop" class="pop" style="display:none" onclick="show(event,'pop');"> 
<div class="pop_head"><a href="javascript:void(0);" onclick="hide('pop')">关闭</a></div> 
<div class="pop_body">谢谢光临……</div> 
</div> 
<!--弹出层的按钮:--> 
<a href="javascript:void(0);" onclick="show(event,'pop');">弹出按钮</a> 
<script type="text/javascript"> 
var url = '#'; 
function show(evt,o){ 
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
var o = document.getElementById(o); 
o.style.display = ""; 
} 
function hide(o){ 
var o = document.getElementById(o); 
o.style.display = "none"; 
window.location = url; 
} 
document.onclick=function(){hide('pop');}
</script> 
</body> 
</html>

总结:

1.在调用弹出方法的时候要传入一个事件对象:event。

2.弹出方法要加入事件绑定代码。

3.要有个全局的js代码,用来执行点击其他部位的时候调用隐藏弹出层的方法。

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 #Javascript
JS获取url链接字符串 location.href
Dec 23 #Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 #Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 #Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 #Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 #Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 #Javascript
You might like
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
详解JS模块导入导出
2017/12/20 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
python如何设置静态变量
2020/09/07 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
翻译专业应届生求职信
2013/11/23 职场文书
三八节标语
2014/06/27 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2019教师的学习计划
2019/06/25 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB