Abrir div foltante para publicidad al pinchar un enlace

[moisesneveu]

Hola... quisiera poder pinchar un enlace y que este abriera un DIV flotante con alguna información y que para cerrarlo tenga una x o un "cerrar" en la esquina...

como se puede hacer esto?? hay algún ejemplo por ahi? he buscado pero los que encuentro no me funcionan

este ejemplo se ve bien pero al abrir la página ya viene abierto y no se cambiarlo para que se abra desde un enlace.

Saludos y muchas gracias.

Código CSS:

<style>
        .black_overlay{
            display: hide;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: hide;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 300px;
            height: 250px;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
 

Código HTML:

<div id="light" class="white_content">
 
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><p style="font-size:xx-small" align="right">X</p></a>
 
AQUI EL CODIGO DE PUBLICIDAD, Imagen o textos..
 
</div>
        <div id="fade" class="black_overlay"></div>