怎么点击div之外的区域就隐藏这个div啊 找了很久,都没有很好解决
2015-11-05 19:13
483 查看
方法一.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<span onClick="with(document.getElementById('pop')){style.display='';tabIndex = 1;focus();}" style="color:#F00">打开层</span>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div id="pop" hidefocus="true" onblur="this.style.display='none';" style="border:#000; background-color:#CCC; position:absolute; left:50px; top:50px;width:200px;height:200px; display:none">浮层,点击这个浮层以外的区域,都可以隐藏这个浮层,怎么做啊,多谢了</div>
</body>
</html>
方法二。
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(".a").on("click", function(e) {
if ($(".menu").is(":hidden")) {
$(".menu").show();
} else {
$(".menu").hide();
}
$(document).one("click", function() {
$(".menu").hide();
});
e.stopPropagation();
});
$(".menu").on("click", function(e) {
e.stopPropagation();
});
})
</script>
</head>
<body>
<p>
<a href="javascript:void(0)" class="a">菜单按钮</a>
</p>
<div class="menu">
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<span onClick="with(document.getElementById('pop')){style.display='';tabIndex = 1;focus();}" style="color:#F00">打开层</span>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div id="pop" hidefocus="true" onblur="this.style.display='none';" style="border:#000; background-color:#CCC; position:absolute; left:50px; top:50px;width:200px;height:200px; display:none">浮层,点击这个浮层以外的区域,都可以隐藏这个浮层,怎么做啊,多谢了</div>
</body>
</html>
方法二。
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(".a").on("click", function(e) {
if ($(".menu").is(":hidden")) {
$(".menu").show();
} else {
$(".menu").hide();
}
$(document).one("click", function() {
$(".menu").hide();
});
e.stopPropagation();
});
$(".menu").on("click", function(e) {
e.stopPropagation();
});
})
</script>
</head>
<body>
<p>
<a href="javascript:void(0)" class="a">菜单按钮</a>
</p>
<div class="menu">
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
相关文章推荐
- 【poj2229】Sumsets
- Linux基本安全措施、加强系统账号密码安全、系统引导和登录安全、用户切换、su、sudo、grub菜单
- newInstance参数详解
- 指针数组与数组指针------C++学习笔记
- 转:超实用的IOS 9人机界面指南(1):UI设计基础 (腾讯力作)
- SQL Server——热备份
- 2015/11/5 笔记
- document.getElementById的用法
- KMP算法的Next数组详解
- 浅尝KMP算法
- Ubuntu下配置JDK与tomcat
- mysql热备份
- 数据驱动测试之——CSV+TestNG
- listview嵌入scrolview冲突解决方法
- Django的单元测试
- MS SQL Server 数据库连接字符串
- Arcgis Android 常见问题
- Generate Parentheses
- uva 10954——Add All
- fedora 18 下kvm虚拟机通过libvirt实现pci pass through