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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
原生js实现俄罗斯方块
Oct 20 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错误日志的获取方法
2015/07/20 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
js实现日期级联效果
2014/01/23 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python字符串替换的2种方法
2014/11/30 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python实现Zabbix-API监控
2018/09/17 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python实现汇率转换操作
2020/05/03 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
运动会广播稿30字
2014/01/21 职场文书
经典团队口号大全
2014/06/21 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
银行求职自荐信范文
2015/03/04 职场文书