日期:2014-05-16  浏览次数:20384 次

点击box外面body空白实现隐藏box的操作怎么做?
点击box外面body空白实现隐藏box的操作怎么做?
不要jquery,只要纯js或mootools


------解决方案--------------------
HTML code

<!doctype html>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            span {
                color:red;
            }
            #test {
                display:none;
                position:absolute;
                left:30px; top:30px;
                width:200px;
                border:1px solid red;
                background:#fff;
                
                outline:none; /* ff 去掉 test 聚焦后的 边框虚线 */
            }
        </style>
    </head>
    <body>
        <span id="span">打开层</span>
        <div>1-1111111111</div>
        <div>1-1111111111</div>
        <div>1-1111111111</div>
        <div>1-1111111111</div>
        <div>1-1111111111</div>
        <div id="test">
            浮层,点击这个浮层以外的区域,都可以隐藏这个浮层
        <div>
        <script>
            function $(o){return document.getElementById(o)}
            $('span').onclick = function(){
                $('test').style.display = 'block';
                $('test').tabIndex = -1;
                $('test').focus();    
            }
            $('test').onblur = function(){
                $('test').style.display = 'none';
            }
        </script>        
    </body>
</html>