请问如果有个弹出层 我想第一次点击一个按钮让他显示 然后我点击非他的任何一个元素让他消失 当然点击它本身他不消失 用jquery或者js咋做

最好能给出具体的代码 或者例子 用jquery或者javascript

解决方案 »

  1.   

    我的jquery是这么写的 但是第一下点击是出来了 但是再点击整个页面都没了function divHide() {
        $(".divHide").each(function () {
            $("body").not(this).click(function () {
                if ($(this).is(":visible")) {
                    $(this).hide();
                }
            });
        });
    }
    请高手指点
      

  2.   

    <div id="scs" style="width:200px;height:200px;border: 1px solid red;display: none"></div>
        <input type="button" value="显示" id="scscms" />
    <script type="text/javascript">
    $(function(){
        $("#scscms,#scs").click(function(e){
            $("#scs").show();
            e.stopPropagation();//阻止冒泡
        });
        $(document).click(function(e){
            $("#scs").hide();
            e.stopPropagation();
        })
    })
    </script>
      

  3.   

    用原生JS写了个简单的DEMO：
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <style type="text/css">
    body{
    margin:0;
    padding:0;
    height:600px;
    }
    #test{
    width:400px;
    height:200px;
    border:1px solid #F60;
    background:#EEE;
    position:absolute;
    z-index:2;
    display:none;
    }
    </style>
    </head>
    <body>
    <div id="test">Layer</div>
    <input type="button" id="showLayer" value="Show"/>
    <script>
    function getCSS(obj,prototype){
    if(obj.currentStyle){
    return obj.currentStyle[prototype];
    } else{
    return document.defaultView.getComputedStyle(obj,null)[prototype];
    }
    } var showBtn=document.getElementById("showLayer"),
    layer=document.getElementById("test");
    showBtn.onclick=function(e){
    layer.style.left = ((window.innerWidth || document.body.clientWidth) - parseInt(getCSS(layer,"width")))/2 + "px";
    layer.style.top = ((window.innerHeight || document.body.clientHeight) - parseInt(getCSS(layer,"height")))/2 + "px";
    layer.style.display="block";
    if(e.cancelBubble)
    e.cancelBubble = true;
    else
    e.stopPropagation();
    } layer.onclick=function(e){
    e= e || window.event;
    if(e.cancelBubble)
    e.cancelBubble = true;
    else
    e.stopPropagation();
    } document.body.onclick=function(e){
    layer.style.display = "none";
    }
    </script>
    </body>
    </html>