具体的问题是这样的:
我现在点击一个按钮弹出隐藏层了,但是我想要在点击弹出层以外的地方关闭这个弹出层,而且在弹出层上面的各种按钮、超链接、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> 
      

  2.   


    <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>
    <input type="button" value="close" onclick="javascript:document.getElementById('outside_div').style.display='none';"/>
    </body>
    </html>
      

  3.   

    在弹出层外面加这个行么?
    <input type="button" value="close" onclick="javascript:document.getElementById('outside_div').style.display='none';"/>
      

  4.   


    这样基本上是可以的,但是如果我点击在selPackage的其他td上呢?
      

  5.   


    我自己搞定了,花了一天多的时间,真不值啊!
    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>