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>
  • 相关阅读:
    activiti流程跟踪图简单详解
    maven夹包引入的速度问题
    maven的pom.xml文件配置详解
    maven的简单使用
    Spring mail 邮件服务及其参数配置
    json格式的简单转换
    ajax的简单理解
    广告关闭按钮
    跨数据库调用
    如何完成DEDE CMS外部数据库调用|不同数据库调用数据
  • 原文地址:https://www.cnblogs.com/tie123abc/p/6016946.html
Copyright © 2011-2022 走看看