I want to have a box (a <div>) to display shortly after the page is loaded, for it to fade in and for a user to be able to close/hide the box if they wish. I have got most of the way there but after I close the box it reappears. I can't help but think I shouldn't have
on the <div> but if I don't it doesn't fade in. My code is as follows:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Untitled Document</title>
img {
    border: none;
#infobox {
    text-align: center;
    position: absolute;
    width: 400px;
    bottom: 50px;
    left: 20px;
    padding: .5em;
    opacity: .0;
    display: none;
    color: #222;
    border: solid 1px #222;
#infobox.visible {
    opacity: 1.0;
    transition: opacity .7s linear;
#infoboxclose {
    position: absolute;
    top: -6px;
    right: -6px;
window.onload = function() {
  setTimeout("showbox()", 500);
function showbox() {
  document.getElementById("infobox").setAttribute("class", "visible");
//  document.getElementById("infobox").setAttribute("style", "display:block");
function hidebox() {
  document.getElementById("infobox").setAttribute("class", "");
//  document.getElementById("infobox").setAttribute("style", "display:none");
<div id="infobox" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Vivamus tempus, leo sit amet luctus laoreet, nunc lorem lobortis elit, sit amet egestas urna dolor  quis diam. Quisque tincidunt eros eu erat varius scelerisque gravida turpis egestas. 
<a href="" onClick="hidebox();"><img src="close.png" height="20" width="20" alt="close" id="infoboxclose" /></a>
Thanks guys