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 相关文章推荐
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
详解webpack打包vue时提取css
May 26 Javascript
vue自动化表单实例分析
May 06 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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分页函数
2006/10/09 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python中除法使用的注意事项
2014/08/21 Python
python实现井字棋游戏
2020/03/30 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
使用requests库制作Python爬虫
2018/03/25 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python实现udp聊天窗口
2020/03/31 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
语文教育专业应届生求职信
2013/11/23 职场文书
入党思想汇报
2014/01/05 职场文书
音乐节策划方案
2014/06/09 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
教师节主题班会教案
2015/08/17 职场文书
预备党员表决心的话
2015/09/22 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js