Como Crear Una Ventana Flotante Con Javascript Y CSS
<!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" />
<script type="text/javascript" src='jquery-1.11.3.min.js'></script>
<title> Buscador</title>
</style>
</head>
<body>
<a href="javascript:;" onclick="javascript:abrir1();">Recuperar La Contraseña</a></p>
<div class="contenedor-forgot" id="contenedor-forgot">
<form id="form_reset_pwd" >
<div class="formulario-forgot" id="form_reset_pwd">
<input type="reset" onClick="javascript:cerrar1();" class="salir" value="X">
<h1>RECUPERAR CONTRASEÑA</h1>
<label>Correo:</label>
<input type="text" id ="email" name="email" placeholder="ejemplo12345@ejemplo.com">
<input type="button" class="forgot_password" value="Enviar Email">
<div id ="error" style="color:#000">
</div>
</div>
</div>
</body>
</html>
<Script>
function abrir1(){
$('#contenedor-forgot').fadeIn("slow", function(){
});
}
function cerrar1(){
$('#contenedor-forgot').fadeOut("slow", function(){
$("#error").empty();
});
}
</Script>
<style type="text/css">
body {
background: #FFFFF0;
color: #999;
font: 400 16px/1.5em sans-serif;
margin: 0;
}
/*Estilos para la ventana flotante y el formulario login*/
.contenedor-forgot{
background: rgba(0,0,0,0);
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
display:none;
}
.formulario-forgot{
text-align: center;
position: absolute;
width: 500px;
height: 250px;
left: 50%;
top: 50%;
background-color: #F90;
border-radius: 10px;
margin-top: -125px;
margin-left: -250px;
border: 1px solid #CED5D7;
padding: 10px 10px;
}
.formulario-forgot input[type="text"]{
display: inline-block;
margin: 5px;
border: 1px solid #dadada;
background-color: #eaeaea;
padding: 5px;
color: #404040;
width: 80%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.formulario-forgot h1{
font-family:Arial, Helvetica, sans-serif;
margin-top:50px;
padding:20px;
color: #333;
font-size: 18px;
text-align:center;
text-transform: uppercase;
}
.formulario-forgot label {
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
color:#003;
font-size:16px;
padding:5px 5px;
}
.salir{
float:right;
}
.salir {
background: #000;
border-radius: 3px;
color: #FFF;
float: right;
font-weight: bold;
margin-top: 0px auto;
padding: 2px 7px;
}
.salir:hover{
background: #F00;
}
</style>
Descargar
Comentarios
Publicar un comentario