87,915
社区成员
发帖
与我相关
我的任务
分享求代码：点击任意空白处关闭DIV
比如：
<a href='#'>详情</a>
点击“详情”，在“详情”的正下方出现一个漂浮的DIV 显示详细信息，
问题：如何实现点击除DIV 之外的任意地方都关闭DIV？求代码！JS JQ都行，要能通用，因为一个页面很多处这样的东西！
<a href='#'>详情</a>
点击“详情”，在“详情”的正下方出现一个漂浮的DIV 显示详细信息，
问题：如何实现点击除DIV 之外的任意地方都关闭DIV？求代码！JS JQ都行，要能通用，因为一个页面很多处这样的东西！
...全文
请发表友善的回复…
发表回复
Wilson_Zhong 2010-09-26
- 打赏
- 举报
[Quote=引用 13 楼 bennman 的回复:]
加个满屏的DIV 总感觉不好会出事 hoho
还是10楼有点靠谱，
现在 求个好用的ToolTip 插件 简单点 体积小就行。。。
1点结贴。。
[/Quote]
满屏的Div很多插件都在用
jQuery的fancybox效果，关闭弹出的放大图片，就是用的满屏DIV
加个满屏的DIV 总感觉不好会出事 hoho
还是10楼有点靠谱，
现在 求个好用的ToolTip 插件 简单点 体积小就行。。。
1点结贴。。
[/Quote]
满屏的Div很多插件都在用
jQuery的fancybox效果，关闭弹出的放大图片，就是用的满屏DIV
flyxiao1987 2010-09-26
- 打赏
- 举报
<html>
<head>
<script type="text/javascript">
document.onclick=function(){
var div = document.getElementById("div");
var loc = getLoc(div);
var e = window.event;
if ((e.clientX >= loc.locX && e.clientX <= (parseInt(loc.locX) + parseInt(div.offsetWidth))) && (e.clientY >= loc.locY && e.clientY <= (parseInt(loc.locY) + parseInt(div.offsetHeight)))){
div.style.display = "";
} else {
div.style.display = "none";
}
}
var loc = function() {
this.locX = 0;
this.locY = 0;
}
function getLoc(el){
var x = el.offsetLeft;
var y = el.offsetTop;
while(el = el.offsetParent){
x += el.offsetLeft;
y += el.offsetTop;
}
var divLoc = new loc();
divLoc.locX = x;
divLoc.locY = y;
return divLoc;
}
</script>
</head>
<body>
<div id="div" style="background-color:yellow;border:1px solid red;width:300px;height:200px;position:absolute;left:300px;top:200px;">
</div>
</body>
</html>
根据鼠标点击位置判断是否在div内
hoojo 2010-09-26
- 打赏
- 举报
jQuery Plugin - Tooltip .
jTip - The jQuery Tool Tip .
clueTip .
BetterTip .
Flash Tooltips using jQuery .
ToolTip .
更多插件参考http://blog.csdn.net/IBM_hoojo/archive/2010/06/24/5691142.aspx
jTip - The jQuery Tool Tip .
clueTip .
BetterTip .
Flash Tooltips using jQuery .
ToolTip .
更多插件参考http://blog.csdn.net/IBM_hoojo/archive/2010/06/24/5691142.aspx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>floatDiv2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#show {
border: 1px solid black;
background-color: #E5F0FB;
position: absolute;
width: 150px;
height: 100px;
display: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$(document).click(function (e) {
if (e.target.id != "show") {
$("#show").hide();
}
});
$("a").click(function (e) {
$("#show").css({left: e.clientX, top: e.clientY}).show();
return false;//防止冒泡
});
});
</script>
</head>
<body>
<a href="#">click me</a>
<div id="show"></div>
</body>
</html>as6231365 2010-09-26
- 打赏
- 举报
学习学习
bennman 2010-09-26
- 打赏
- 举报
加个满屏的DIV 总感觉不好会出事 hoho
还是10楼有点靠谱，
现在 求个好用的ToolTip 插件 简单点 体积小就行。。。
1点结贴。。
还是10楼有点靠谱，
现在 求个好用的ToolTip 插件 简单点 体积小就行。。。
1点结贴。。
MrSLin 2010-09-25
- 打赏
- 举报
你的判断难是指除DIV 之外的任意地方难，还是指判断哪个DIV隐藏难？
ssiije 2010-09-25
- 打赏
- 举报
这个很简单。在弹出加一个浮动的满屏的DIV ，设置DIV的透明度为 1 ，单单击这个DIV的时候关闭就可以了~
是不是很简单，如果不懂的话，我可以写代码出来~~~
是不是很简单，如果不懂的话，我可以写代码出来~~~
wz_307 2010-09-25
- 打赏
- 举报
$(document).ready(function(){
$(document).bind('click', Hide);
});
function Hide(e){
if($(e.target)[0].id =="Pop" )
return;
$("#Pop").hide();
}
这样子.
还要注意Pop的子元素冒泡要排除掉.
如果还要进一步优化的话, 就在hide了以后unbind这个click事件, 在点a show()的时候再bind. 效率层面上的优化..如果页面不复杂就不必要了
Wilson_Zhong 2010-09-25
- 打赏
- 举报
给你推荐个方法：
在显示详细信息的DIV的下面，建一个透明的全屏DIV，在该DIV上加onclick事件即可
<div style="z-index:1100;background-color: rgb(102, 102, 102); opacity: 0.3; display: block;..." onclick="document.getElementById('aaa').style.display='none'"></div>
<div id="aaa">详细信息</div>
在显示详细信息的DIV的下面，建一个透明的全屏DIV，在该DIV上加onclick事件即可
<div style="z-index:1100;background-color: rgb(102, 102, 102); opacity: 0.3; display: block;..." onclick="document.getElementById('aaa').style.display='none'"></div>
<div id="aaa">详细信息</div>
flyxiao1987 2010-09-25
- 打赏
- 举报
<html>
<head>
<script type="text/javascript">
document.onclick=function(){
document.getElementById("div").style.display="none";
}
function clickDiv(div){
div.style.display="";
var b = window.event;
b.cancelBubble = true;
}
</script>
</head>
<body>
<div onclick="clickDiv(this)" id="div" style="background-color:yellow;border:1px solid red;width:300px;height:200px;position:absolute;left:300px;top:200px;">
</div>
</body>
</html>
bennman 2010-09-25
- 打赏
- 举报
[Quote=引用 5 楼 lieri111 的回复:]
用jquery，想隐藏谁的时候就直接
JScript code
$("#id").hide();// id是要隐藏对象的id
就可以了
[/Quote]
隐藏不是难事，难的是判断，呵呵，来人啊！来点代码吧
用jquery，想隐藏谁的时候就直接
JScript code
$("#id").hide();// id是要隐藏对象的id
就可以了
[/Quote]
隐藏不是难事，难的是判断，呵呵，来人啊！来点代码吧
passself 2010-09-25
- 打赏
- 举报
用jquery，想隐藏谁的时候就直接
就可以了
$("#id").hide();// id是要隐藏对象的id
就可以了
funfun5433 2010-09-25
- 打赏
- 举报
先得到div的坐标 接着获得鼠标点击的坐标 再判断 不知道是否可行？
MrSLin 2010-09-25
- 打赏
- 举报
你说的方法一般大家也都这么想，加个onclick事件么。要么用setTimeout给div一个固定的显示时限，或者你给显示的div加一个关闭的小图标，点击才消失。
你都说了页面很多处这样的东西，如果你一下子点击很多，出现了很多弹出的div，那么处理起来会很乱的，个人感觉。
你都说了页面很多处这样的东西，如果你一下子点击很多，出现了很多弹出的div，那么处理起来会很乱的，个人感觉。
jol_boy 2010-09-25
- 打赏
- 举报
貌似除了这个方法，没其他了吧~~要么就是给div加一个显示的时限，10秒钟以后自动关闭，但是也还是得加入document的click事件，判断是否点击的是那个div
bennman 2010-09-25
- 打赏
- 举报
PS：自己也写了，给document加onlick事件 然后判断事件对象的ID是不是DIV的ID 感觉不好，求更好的！
