Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Ventanas flotantes que no sean pop-up

mi duda es la siguiente porque no encuentro respuesta en google solo me salen como hacer pop-ups la duda es como hago para que cuando de clic en un botón me salga una ventana tipo div como la que sale cuando damos clic para loguearnos o registrarnos en este foro.

Me gustaria saber como se hace cuales el nombre que se le da a esto si me pasais un tutorial o link sobre como hacerlo os lo agradezco
0
Puntos
2373
Visitas
2
Resp
Por jorgevip hace 93 meses
Principiante
Respuesta #1
Bueno se llaman modales y en Google puedes encontrar muchos tutoriales. Puedes ver este tutorial para iniciar.

Saludos
0
Puntos
Por jonni09lo hace 93 meses
Experto
Respuesta #2
Es un div más. Pero modificando su estilo (css) y usando Javascript. Te doy un ejemplo.
<html>
<head>
<title>Prueb</title>
<script type="text/javascript">
	function Onlogin() {
		document.getElementById('flotante_login').style.display="block";
	}
</script>
<style>
body {
font-family:Arial;
font-color:#444444;
}
#flotante_login {
width:400px;
height:300px;
position:fixed;
top:200px;
left:33%;
padding: 20px;
display: none;
border:1px solid #d7d7d7;
box-shadow:1px 1px 4px #b1b1b1;
}
</style>
</head>
<body>

<button id="btn_login" onclick="javascript:Onlogin();">Iniciar sesion</button>

<div id="flotante_login"> Iniciar sesion </div>


</body>
</html>

Estudia y analiza ese código que hice ahorita como prueba y practícalo, modifícalo. Por ejemplo, usando el mismo método puedes colocar un botón dentro del <div> que diga CERRAR. Y le pones un Onclick="javascript:Outlogin;" y donde está el script de javascript creas un function Outlogin() { } Y el display lo pones así display="none".

:P
0
Puntos
Por Jose hace 92 meses
Experto Sitio web
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate