方法一.

<!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>

怎么点击div之外的区域就隐藏这个div啊 找了很久，都没有很好解决的更多相关文章

  1. Jquery点击除了指定div元素其他地方，隐藏该div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

  2. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  3. js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...

  4. 点击区域外隐藏该区域，event.stopPropagation()

    event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing an ...

  5. 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  6. 点击页面其它地方隐藏该div的方法

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  7. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  8. jquery点击元素之外触发事件

    $("#errorMsg_layer").bind("click",function(e){ if($(e.target).closest("#err ...

  9. 设立点击ProgressDialog外的区域对话框不消失

    设置点击ProgressDialog外的区域对话框不消失ProgressDialog mpDialog = new ProgressDialog(OrderTable.this);  mpDialog ...

随机推荐

  1. eclipse中设置文件的编码格式为utf-8

    1.可以在 eclipse 中配置 workspace 项下 text file encoding 属性的值来决定此工作区间下所有的 eclipse 项目的文档的编码属性. Window-->P ...

  2. wcf中的使用全双工通信(转)

    wcf中的使用全双工通信   wcf中的契约通信默认是请求恢复的方式,当客户端发出请求后,一直到服务端回复时,才可以继续执行下面的代码. 除了使用请求应答方式的通信外,还可以使用全双工.下面给出例子: ...

  3. linux-nohup后台运行

    先说一下linux重定向: 0.1和2分别表示标准输入.标准输出和标准错误信息输出,可以用来指定需要重定向的标准输入或输出. 在一般使用时,默认的是标准输出,既1.当我们需要特殊用途时,可以使用其他标 ...

  4. [Python] NotImplemented 和 NotImplementedError 区别

    NotImplemented 是一个非异常对象,NotImplementedError 是一个异常对象. >>> NotImplemented NotImplemented > ...

  5. Android的Fragment中onActivityResult不被调用

    1.检查该Fragment所属的Activity中,是否重写了onActivityResult方法. 2.检查Fragment中的startActivityForResult的调用方式. 请确保不要使 ...

  6. 偶值得纪念的一天-初学习C#

    今天好悲催啊,竟然生病啦,不过一切还好! 今天我们在云和数据学习的第二天,上午没有听课,似乎学习了变量的定义以及命名方法,还有变量类型的显隐式转换:我感觉这些还是在之前看书知道啦把,因此看啦看老师做的 ...

  7. 使用jquery的 $.grep实现es6的filter效果

    现在es6是趋势,习惯了es6会方便的多,但是有时候由于项目的限制,会限制es6的使用,在处理数组的时候,往往会想将一个数组进行过滤产生另一个新数组,如es6的filter 如下,我又一个数组,[1, ...

  8. java 读写文件例子

    在linux下可以读写中文 import java.io.*; import java.text.SimpleDateFormat; import java.util.*; public class ...

  9. 如何创建圆角 UITextField 与内阴影

    本文转自http://www.itstrike.cn/Question/9309fbd6-ef5d-4392-b361-a60fd0a3b18e.html 主要学习如何创建内阴影 我自定义 UITex ...

  10. php安装xdebug后var_dump输出没有格式化的问题

    开发环境,装了一个xdebug扩展方便调试代码. 但是环境配置好了之后却发现xdebug加载成功了但是var_dump输出的内容却没有使用html格式化 这时想到估计是php.ini里面的某个输出的配 ...