具体的问题是这样的:
我现在点击一个按钮弹出隐藏层了,但是我想要在点击弹出层以外的地方关闭这个弹出层,而且在弹出层上面的各种按钮、超链接、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>
我现在点击一个按钮弹出隐藏层了,但是我想要在点击弹出层以外的地方关闭这个弹出层,而且在弹出层上面的各种按钮、超链接、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>
<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>
<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>
<input type="button" value="close" onclick="javascript:document.getElementById('outside_div').style.display='none';"/>
</body>
</html>
<input type="button" value="close" onclick="javascript:document.getElementById('outside_div').style.display='none';"/>
这样基本上是可以的,但是如果我点击在selPackage的其他td上呢?
我自己搞定了,花了一天多的时间,真不值啊!
js代码如下:<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 obj = evt.srcElement;
var objNode = obj;
while(objNode && objNode.id != o){
//alert(obj.id);
objNode = objNode.parentNode;
}
if(obj.id == 'closeBtn_div' || obj.id == 'okPack'){
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
document.getElementById(o).style.display = "none";
}
if(!objNode || objNode.id != o){
document.getElementById(o).style.display = "none";
}
//var o = document.getElementById(o);
//alert("close: "+o.id);
//o.style.display = "none";
}
document.onclick=function(){closeWin(event,'outside_div');}
</script>