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
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
Puntos
2893
Visitas
Visitas
2
Resp
Resp
Por jorgevip hace 123 meses
Principiante
Respuesta #1
Bueno se llaman modales y en Google puedes encontrar muchos tutoriales. Puedes ver este tutorial para iniciar.
Saludos
Saludos
0
Puntos
Puntos
Por jonni09lo hace 123 meses
Experto
Respuesta #2
Es un div más. Pero modificando su estilo (css) y usando Javascript. Te doy un ejemplo.
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
<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
