如何实现点击弹出层以外关闭弹出层？

derek_leng 2011-12-09 02:33:16
具体的问题是这样的：
我现在点击一个按钮弹出隐藏层了，但是我想要在点击弹出层以外的地方关闭这个弹出层，而且在弹出层上面的各种按钮、超链接、checkbox都可以正常使用。
html代码如下：（问题在于我点击弹出层中的某些地方它也会关闭）


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>close div</title> 

</head> 

<body>

<script type="text/javascript"> 

function openWin(evt,o){

	evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;

	var o = document.getElementById(o); 

	//alert("open: "+o.id);

	o.style.display = ""; 

} 

function closeWin(evt,o){ 

	evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;

	var o = document.getElementById(o); 

	//alert("close: "+o.id);

	o.style.display = "none"; 

} 

document.onclick=function(){closeWin(event,'outside_div');}

</script>

<table style="text-align: left; margin-left: auto; margin-right: auto; width: 900px;">

	<tbody>

		<tr valign="middle" id="selPackage" style="background-color: rgb(204, 204, 255);">

			<td> </td><td> </td><td> </td>

			<td align="right" width=250><span><nobr>

				Package 

				<input type="button" id="packBtn" style="width: 80px;height: 30px;position: absolute;cursor: pointer;" value="open" onclick="openWin(event,'outside_div');" />

				<div id="outside_div" style="display: none;" onclick="openWin(event,'outside_div');">

					<div align="left" style="float: left;font: bold;font-size: x-small;">Package Code</div>

					<div id="closeBtn_div" onclick="closeWin(event,'outside_div')" >[ X ]</div>  

					<div id="selections_div" align="left">

						<ul style="list-style: none;float: left;margin-top: 15px;">

							<li><input id="" name="chpack" value="19.2BC" type="checkbox"/>19.2BC</li>

							<li><input id="" name="chpack" value="ALL" type="checkbox"/>ALL</li>

							<li><input id="" name="chpack" value="EMAIL" type="checkbox" checked="checked"/>EMAIL</li>

							<li><input id="" name="chpack" value="FV32" type="checkbox" checked="checked"/>FV32</li>

							<li><input id="" name="chpack" value="IQ" type="checkbox" checked="checked"/>IQ</li>

						</ul>

						<ul style="float: right;margin-top: 15px;margin-right: 30px;">

							<li><input id="" name="chpack" value="IWP" type="checkbox" checked="checked"/>IWP</li>

							<li><input id="" name="chpack" value="M101" type="checkbox" checked="checked"/>M101</li>

							<li><input id="" name="chpack" value="SV32" type="checkbox" checked="checked"/>SV32</li>

							<li><input id="" name="chpack" value="TEST" type="checkbox" checked="checked"/>TEST</li>

						</ul>

					</div>

					<div id="div4" align="center">

						<input id="selAllPack" style="width: 50px;" type="button" value="All" onclick="selOrDeselAll(this.value);"/> 

						<input id="resetPack" style="width: 50px;" type="button" value="Reset" onclick="resetSel();" /> 

						<input id="okPack" style="width: 50px;" type="button" value="OK" onclick="completeSel();" />

					</div>

				</div>



			</nobr></span></td>

		</tr>

	</tbody>

</table>

</body> 

</html>
...全文
237 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
derek_leng 2011-12-12
  • 打赏
  • 举报
 回复
已经搞定了，谢谢！
qq307023807 2011-12-09
  • 打赏
  • 举报
 回复

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>close div</title>
</head>
<body>
<script type="text/javascript">
function openWin(evt,o){
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
var o = document.getElementById(o);
// alert("open: "+o.id);
o.style.display = "";
}
function closeWin(evt,o){
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
var div = document.getElementById(o);
//alert("close: "+o.id);



if(evt.srcElement.parentNode.id!="selPackage"){

div.style.display = "none";
}
}
document.onclick=function(){closeWin(event,'outside_div');}
</script>
<table style="text-align: left; margin-left: auto; margin-right: auto; width: 900px;">
<tbody>
<tr valign="middle" id="selPackage" style="background-color: rgb(204, 204, 255);">
<td> </td><td> </td><td> </td>
<td align="right" width=250><span><nobr>
Package 
<input type="button" id="packBtn" style="width: 80px;height: 30px;position: absolute;cursor: pointer;" value="open" onclick="openWin(event,'outside_div');" />
<div id="outside_div" style="display: none;" onclick="openWin(event,'outside_div');">
<div align="left" style="float: left;font: bold;font-size: x-small;">Package Code</div>
<div id="closeBtn_div" onclick="closeWin(event,'outside_div')" >[ X ]</div>
<div id="selections_div" align="left">
<ul style="list-style: none;float: left;margin-top: 15px;">
<li><input id="" name="chpack" value="19.2BC" type="checkbox"/>19.2BC</li>
<li><input id="" name="chpack" value="ALL" type="checkbox"/>ALL</li>
<li><input id="" name="chpack" value="EMAIL" type="checkbox" checked="checked"/>EMAIL</li>
<li><input id="" name="chpack" value="FV32" type="checkbox" checked="checked"/>FV32</li>
<li><input id="" name="chpack" value="IQ" type="checkbox" checked="checked"/>IQ</li>
</ul>
<ul style="float: right;margin-top: 15px;margin-right: 30px;">
<li><input id="" name="chpack" value="IWP" type="checkbox" checked="checked"/>IWP</li>
<li><input id="" name="chpack" value="M101" type="checkbox" checked="checked"/>M101</li>
<li><input id="" name="chpack" value="SV32" type="checkbox" checked="checked"/>SV32</li>
<li><input id="" name="chpack" value="TEST" type="checkbox" checked="checked"/>TEST</li>
</ul>
</div>
<div id="div4" align="center">
<input id="selAllPack" style="width: 50px;" type="button" value="All" onclick="selOrDeselAll(this.value);"/> 
<input id="resetPack" style="width: 50px;" type="button" value="Reset" onclick="resetSel();" /> 
<input id="okPack" style="width: 50px;" type="button" value="OK" onclick="completeSel();" />
</div>
</div>

</nobr></span></td>
</tr>
</tbody>
</table>
</body>
</html>


JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
主要介绍了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能,结合实例形式分析了javascript事件响应及页面元素属性动态操作弹出与关闭遮罩层相关实现技巧,需要的朋友可以参考下
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能。分享给大家供大家参考，具体如下： 原理参考前面一篇《JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能》，小编顺便对原文区域外点击bug进行了修改，具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e
websocket实现斗鱼弹幕系统
本课程主要讲解了1.服务器的消息如何发给客户端；2.通过实现方式利用websocket；3.websocket实现方案概述等内容，希望学完之后对你有所收获。
jQuery点击自身以外地方关闭弹出层的简单实例
主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用 开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码: HTML代码： 代码如下:clickshow-areaCSS代码：.hide{display:none;} JS代码 代码如下:$(document).ready(function(){$(“div.down”).click(function(e){e.stopPropagation();$(“di
点击弹出层以外的区域隐藏弹出层
我们店显示弹出层后，想让其消失，但又不想添加“X”来关闭，可以使用点击弹出层以外的区域来让该层消失的办法。下面如代码： $(".btn3").click(function(e){ e.stopPropagation();//阻止事件向上冒泡 $(".con-share").removeClass("hide"); })//显示弹出层 $(document).click(fu...
JavaScript

87,902

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章