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 相关文章推荐
JS实现切换标签页效果实例代码
Nov 01 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
动态加载js文件简单示例
Apr 21 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
详解vue表单——小白速看
Apr 08 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 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
javascript function、指针及内置对象
2009/02/19 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
python写的一个文本编辑器
2014/01/23 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python中的pprint折腾记
2015/01/21 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python中遍历列表的方法总结
2019/06/27 Python
python字符串的拼接方法总结
2019/11/18 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python中pass的作用与使用教程
2020/11/13 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
生产部管理制度
2014/01/31 职场文书
大型营销活动计划书
2014/04/28 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2014年组织部工作总结
2014/11/14 职场文书
玄武湖导游词
2015/02/05 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS