logo-antoiba

Antonio Ibáñez Programming

Crear una capa semitransparente que recubra la página con un alert box

JavaScript jQuery

Para un proyecto en PHP, necesitaba una capa semitransparente con un mensaje para cuando la persona accediera a zonas restringidas en la aplicación.

Para ello, crearemos una capa en html y css, y que junto a jQuery se active cuando intentemos acceder a esa zona de la aplicación.

El ejemplo está aquí para que lo veáis.

1. HTML

Primero creamos dos capas html. La capa overlay es la capa que se verá encima de la página html original y la tapará. La caja está dentro de esta capa y será la caja donde irá nuestra información. Estas dos capas, pueden ir en el lugar que prefieras, yo en mi código lo he puesto justo después del header.



<div id='mustReg'>
Debes registrarte (Pulsa aquí para ver en acción la capa)
</div>

<div class='overlay' id='overlay'></div>

<div class='box' id='box'>
<a class='boxclose' id='boxclose'>X</a>
<h1>¡You are not register o logued!</h1>
<p>
To register, go to this link <a href='#' class='login'>register</a>.<br>
To login, <a href='#' class='register'>Login</a>.
</p>
</div>

2. CSS

Ahora vamos a ver el código CSS.

Como podemos ver, le hemos asignado un color rgba con una transparencia del 0.7 pero podéis darle el número que veáis conveniente, a lo mejor un 0.5 puede verse mejor en vuestra aplicación.

La posición es "fixed" para que estando en el lugar de la página que estés, aparezca, sin depender del width o el height. Y tiene un z-index de 100 para superponerse a las capas normales. Ojo, si tienes algún elemento con un z-index superior, le das un valor mayor que a ese elemento.



.overlay{
background:rgba(204, 204, 204, 0.7);
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
display:none;
}

Ponemos un top, left y right de 0px para que siempre ocupe toda la pantalla. Yo he puesto un color gris, pero podéis elegir el que creáis conveniente.

Ahora agregamos el css a la caja, dependiendo de donde la queramos jugamos con los valores de top, left y right. Luego elegimos el colo que queramos, en este caso blanco y un z-index mayor que el de la capa overlay.



.box{
    position:fixed;
    top:200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
    display:none;
}

Como antes la posición es fixed para que se quede siempre en la mitad de la pantalla (o donde quieras ponerla) para que el usuario no pueda usar nada para moverla.

El enlace que hemos agregado antes con una X le daremos un estilo css para que parezca un botón.



a.boxclose{
float:right;
width:26px;
height:26px;
background:white;
margin-top:-30px;
margin-right:-30px;
padding-left:15px;
padding-top:10px;
cursor:pointer;
border: 2px solid;
border-radius: 25px;
}

Así nos quedará una apareciencia redondeada y clara de botón que al clickar se cerrará.

3. JQUERY

Ahora debemos de poner el código de jQuery. Es la parte más importante. Al pulsar sobre la parte que quieras restringir, saltará la capa overlay y la capa box para que no se pueda seleccionar nada de lo que haya abajo hasta cumplir las condiciones que tú deseas.

Al clickar sobre la dirección de correo que queremos vetar, nos aparecerá la capa y un mensaje.



$(document).ready(function main() {
$('#mustReg').click(function(){
$('#overlay').fadeIn('fast');
$('#box').slideDown('fast');
});
$('#boxclose').click(function(){
$('#overlay').fadeOut('fast');
$('#box').slideUp('fast');
});
});

Para salir de ella tendremos que pulsar sobre la X.

Y magia, ya tenemos nuestra capa de seguridad para que no se pueda acceder a partes que no queremos que se vea y que mande un mensaje de alerta sobre ello.

Fácil y para toda la familia.

http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/


Escribe un comentario

Anterior Menu Dropdown con jQuery y CSS

Está web utiliza cookies para asegurarse de una mejor experiencia de nuestra página webMás información sobre las cookies