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实现动态CSS换肤技术的脚本
Jun 29 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
JS高级笔记
Jul 13 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
摘自启点的main.js
2008/04/20 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
Vue 组件间的样式冲突污染
2017/08/31 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python双链表原理与实现方法详解
2020/02/22 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
领导干部考察材料
2014/02/08 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
快递员岗位职责
2014/09/12 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
小学生思想品德评语
2014/12/31 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers