Ventana que se abre

fedefrankk · #1 (**permalink**) 01/06/2014, 13:48

Hola, a todos, estoy buscando algun codigo que cuando yo aprieto por ejemplo "registrarme", emerja una ventana (div) y todos los div y botones de mi web no funcionen mas, lo han visto mucho esto lo que estoy pidiendo,

Bueno muchas gracias de antemano, saludos a todos..
fede

Pd: Si posteo es porque ya busque en google,,,

Alexis88 · #2 (**permalink**) 01/06/2014, 14:15

Creo que te faltó buscar 'Ventana modal'.

Básicamente, consta de dos elementos en bloque como pueden ser un <div> o un <section> (implementado en HTML5), los cuales deben estar ocultos mediante estilos (CSS), luego, cuando pulses el botón de registro, mediante código JavaScript, modificas los estilos y logras hacerlos aparecer. El primero de los dos elementos debe ocupar todo el espacio en pantalla para que los demás elementos no puedan ser accesibles, mientras que el segundo debe estar centrado y tener un tamaño menor al anterior, en el cual se mostraría el formulario de registro que deseas añadir.

Un pequeño y sencillo ejemplo:

Como ves, todo está en la hoja de estilos y el código JS. Adáptalo a tus necesidades.

Saludos

Italico76 · #3 (**permalink**) 01/06/2014, 16:11

Muy bueno @Alexis88, definitivamente le pones ganas!

Alexis88 · #4 (**permalink**) 02/06/2014, 21:48

Hice una versión mejorada, con un efecto similar al del método slideToggle de jQuery.

La velocidad del efecto se puede alterar cambiando los valores de incremento/decremento de las variables hF y hC, además del segundo parámetro del método setInterval.

Saludos

fedefrankk · #5 (**permalink**) 03/06/2014, 16:31

Hola Gracias por tu repuesta, increible muchas gracias.!!!!

saludos
fede

fedefrankk · #6 (**permalink**) 03/07/2014, 17:05

Buenas a todos como andan?... copie tal cual los codigos que pusieron de ejemplo y no me funcinoa.....

.. no se que estoy haciendo mal..
Si me dicen donde esta el famoso error.!!! se los agradecere...

dejo mi archivo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
var mostrar = document.getElementById("mostrar"),
    fondo = document.getElementById("fondo"),
    contenido = document.getElementById("contenido"),
    body = document.body,
    width = window.innerWidth,
    height = window.innerHeight;
 
mostrar.addEventListener("click", function(){
    fondo.style.display = "block";
    fondo.style.width = width + "px";
    fondo.style.height = height + "px";
    
    contenido.style.display = "block";
    contenido.style.top = ((height / 2) - (contenido.offsetHeight / 2) + window.scrollY) + "px";
    contenido.style.left = ((width / 2) - (contenido.offsetWidth / 2) + window.scrollX) + "px";
    
    body.style.overflow = "none";    
}, false);
 
fondo.addEventListener("click", function(){
    fondo.style.display = "none";
    fondo.style.width = 0;
    fondo.style.height = 0;
    
    contenido.style.display = "none";
    
    body.style.overflow = "auto";
}, false);
 
</script>
<style>
body{
    margin: 0;
}
 
#fondo, #contenido{
    display: none;
    position: absolute;
    z-index: 1000;
}
 
#fondo{
    background: rgba(0, 0, 0, .75);
    top: 0;
    left: 0;
}
 
#contenido{
    background: white;
    width: 25em;
    height: 15em;
    border-radius: .5em;
    overflow: auto;
    /* OPCIONAL */
    text-align: center;
    line-height: 15em;
    font-weight: bolder;
}
</style>
</head>
 
<body>
 
 
<div id = "fondo"></div>
<div id = "contenido">
    ¡Hola mundo!
    Dale clic al fondo oscuro para cerrar esto
</div>
<button id="mostrar">Mostrar ventana modal</button>
</body>
</html>

Alexis88 · #7 (**permalink**) 03/07/2014, 17:23

Coloca el código JS justo antes de la etiqueta </body> para que surta efecto, pues del modo en el que se encuentra ahora, primero carga el código JS y luego el resto del DOM, entonces, el código JS no afecta a los elementos en cuestión porque cuando cargó, éstos todavía no existían.

Saludos

fedefrankk · #8 (**permalink**) 03/07/2014, 17:56

Hola gracias ..

saludos
fede