叠加显示在按钮上方

Overlay appear above a button

本文关键字：按钮 显示 叠加      更新时间：2023-09-26

我一直在互联网上寻找一个按钮的例子，当点击时，它会使一个覆盖层直接出现在按钮上方。 这意味着覆盖框底部将与按钮顶部对齐。 只是想知道是否有人有这样的例子？

很抱歉对我的问题如此笼统。 以下是我为获得积极结果而执行的一些代码：

<html>
<head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
    <script type="text/javascript">
      function setVisibility(id) {
        if(document.getElementById('bt1').value=='Hide Layer'){
          document.getElementById('bt1').value = 'Show Layer';
          document.getElementById(id).style.display = 'none';
        }else{
          document.getElementById('bt1').value = 'Hide Layer';
          document.getElementById(id).style.display = 'inline';
        }
      }
    </script>
    <style type="text/css">
        #container {
            width:1px;
            height:1px;
            position: relative;
        }
        #nav,
        #data {
            display:block;
            position:absolute;
            width:100%;
            bottom:100%; /* change to TOP and it will drop down */
            background: #fff;
        }
        #data{
            z-index: 10;
        }
    </style>
</head>
<body>
    <p>test text</p>
    <p>test text</p>
    <p>test text</p>
    <p>test text</p>
    <div id="container">
        <div id="nav"></div>
        <div id="data" >
            blah<br>
            blah<br>
            blah<br>
            blah<br>
        </div>
    </div>
    <input type=button name=type id='bt1' value='Hide Layer'
       onclick="setVisibility('data')";>
    <script> setVisibility('data'); </script>
</body>
</html>
相关文章：