zoukankan      html  css  js  c++  java
  • 单击页面任何地方关闭隐藏层

    单击页面任何地方关闭隐藏层的一种新的实现方法,有需要得朋友可以参考对比一下,可以自己在此基础上扩展相关功能。(也可以在框架页中绑定单击事件,自己加一下即可。)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>单击页面任何地方关闭隐藏层</title>
    <script type="text/javascript">
    
    var document_click_hide_object=function(a,b){
        var a=document.getElementById(a);
        var b=document.getElementById(b);
        //单击a时显示b
        a.addEventListener("click",function(){
            b.style.left=a.offsetLeft + "px";
            b.style.top=a.offsetTop + a.clientHeight + "px";
            b.style.display="block";
            b.setAttribute("data-close","false");
            window.setTimeout(function() {
                b.setAttribute("data-close","true");
            }, 100);
        });
        b.addEventListener("click",function(){
            b.setAttribute("data-close","false");
            window.setTimeout(function() {
                b.setAttribute("data-close","true");
            }, 100);
        });
        document.addEventListener("click",function(){
            window.setTimeout(function() {
                if (b.getAttribute("data-close") == "true") {
                    b.setAttribute("data-close","false");
                    b.style.display="none";
                }
            }, 50);
        });
    }
    
    window.onload=function(){
        document_click_hide_object("a","b");
    }
    </script>
    <style type="text/css">
    #a {
        padding: 3px 10px;
        border: 1px solid #CCC;
        position: absolute;
        top: 50px;
        left: 100px;
        width: 50px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }
    #b {
        padding: 3px 10px;
        border: 1px solid #CCC;
        position: absolute;
        padding:20px;
        display: none;
        background:#FFF;
    }
    </style>
    </head>
    
    <body>
    <div id="a">显示</div>
    <div id="b">我显示后你点击我我不会自动关闭,点击页面任何地方才会关闭噢,快试试看噢!</div>
    </body>
    </html>
  • 相关阅读:
    博客园
    hdu 2071 Max Num
    函数的可选参数
    JqueryUI的使用方法
    [转]淘宝网的设计流程
    hover!= mouseover+mouseout。但hover=mouseenter + mouseleave
    转:理解Progressive enhancement
    jQuery对象和DOM对象的区别
    JS字符串的slice和splice
    内家武功招数
  • 原文地址:https://www.cnblogs.com/tie123abc/p/6016946.html
Copyright © 2011-2022 走看看