'Overlay appear above a button

I've been hunting around the internet for an example of a button that when clicked will make an overlay appear directly above the button. Meaning that an overlay box bottom will line up with the top of the button. Just wondering if anyone has an example of this?

javascripthtmlcssbuttonoverlay


Solution 1:[1]

Sorry for being so general on my question. The following is some code I did to get a positive result:

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 xxx

Related Questions