Using div and css to position a textbox on an html page that can be opened and closed

By thomas, 21 December, 2007

I use this to position a bibTeX entry on a page so users can copy and paste the bibtex code into their bibliographies. I also use this in this blog to display struct definitions for calling arguments to a function. First, we setup the javascript that will hide and show the textbox:

Then we put the css into ourstylesheet that will position our textbox. We use the position: fixed; tag to place the textbox on the page at a specific location regardless of scrolling. We set the visibility to hidden so that the box is hidden until the user clicks a link in the page to open it.


.struct {
        background: #9f9;
        color: #000;
        position: fixed;
        left: 100px;
        top: 100px;
        visibility: hidden;
        margin: 5px;
        padding: 10px;
        border: 2px solid #036;
}
.struct a {
        color: #000;
}

Next we define the div that will hold the textbox and give it an id.



this is the text of the textbox

This is the close button

Finally we insert an appropriate <a> tag to display the box.


test