en JS seria algo asi
Código Javascript :
function ligthBox ( tal ) {
$( '#' + tal + '.lgths' ).click( function(event){
event.preventDefault();
$(this).toggleClass('on');
$( 'section#' + $(this).attr('rel') + '.lgthsbox' ).toggleClass( 'on' );
});
};
jQuery(document).ready(function() {
ligthBox( VerMesg' );
});
En Html
Código HTML :
<a id="VerMesg" class="lgths" rel="Mensaje">Clickeame!!</a> <section id="Mensaje" class="lgthsbox"> <div class="innder" id="mensajito"> Este es un mensjae con mucha alegria!!! <a id="VerMesg" class="lgths" rel="Mensaje">Cerrar!!</a> </div> </section>
Bueno en css..
Código CSS :
.lgthsbox {
width : 100%;
heigth : 100%;
top : 0;
left : 0;
rigth: 0;
bottom : 0;
display : none;
background-color : rgba( 0,0,0,0.8);
}
.lgthsbox.on{
display : block;
}
.lgthsbox > .innder {
width : 200px;
heigth : 200px;
top : 50%;
left : 50%
}
El resto es pintura... ejeje básicamente solo debes colocar las cosas bonitas!!
