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

具体的问题是这样的：
我现在点击一个按钮弹出隐藏层了，但是我想要在点击弹出层以外的地方关闭这个弹出层，而且在弹出层上面的各种按钮、超链接、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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
<td align="right" width=250><span><nobr>
Package&nbsp;
<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);"/>&nbsp;
<input id="resetPack" style="width: 50px;" type="button" value="Reset" onclick="resetSel();" />&nbsp;
<input id="okPack" style="width: 50px;" type="button" value="OK" onclick="completeSel();" />
</div>
</div> </nobr></span></td>
</tr>
</tbody>
</table>
</body> 
</html>

解决方案 »

  1.   


    <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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                <td align="right" width=250><span><nobr>
                    Package&nbsp;
                    <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);"/>&nbsp;
                            <input id="resetPack" style="width: 50px;" type="button" value="Reset" onclick="resetSel();" />&nbsp;
                            <input id="okPack" style="width: 50px;" type="button" value="OK" onclick="completeSel();" />
                        </div>
                    </div>            </nobr></span></td>
            </tr>
        </tbody>
    </table>
    </body> 
    </html>