Estoy desarrollando una pagina web, (a mi paso jajaja) con HTML, CSS y javascript, o jquery (lo ultimo que probe) y PHP ...
El asunto es el siguiente,
En el home, puse un boton para conectar a la BD, la intencion es que ese boton lance un PopUp, un form para ingresar Usuario/Password y boton de conectar/cerrar
El caso, es que el PopUp no me lanza, y no se que tengo mal.
Me base en este ejemplo: http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Para crear el PopUp, pero no funciona
Estos son los codigos:
home.html
Código HTML:
<!DOCTYPE html> <html> <head> <title> Home Maizal WebApp - Home</title> <!-- Hojas de estilo --> <link rel="stylesheet" type="text/css" href="D:\Maizal\WebApp\CSS\homepage.css"> <link rel="stylesheet" type="text/css" href="D:\Maizal\WebApp\CSS\popupconexion.css"> <!-- Scripts jquery, javascript --> <script src="D:\Maizal\WebApp\JS\popupconexion.js"></script> </head> <body> <!-- Banner Principal --> <img id="Banner" src="D:\Maizal\WebApp\Img\Cabecera.jpg"> <!-- Menu horizontal --> <ul class="nav"> <li><a href="D:\Maizal\WebApp\home.html"><img id="homeiconmain" src="D:\Maizal\WebApp\Img\logoMaizal.png">Home<span class="flecha">▼ </span></a></li> <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\bodega.png">Bodega<span class="flecha">▼ </span> </a> <ul> <li><a href="D:\Maizal\WebApp\Pages\historiapedidos.html" class="hpedidos">Historial Pedidos<span class="flecha">▼ </span></a></li> <li><a href="" class="inventario">Inventario<span class="flecha">▼ </span></a></li> <li><a href="" class="apedido">Agregar Pedido<span class="flecha">▼ </span></a></li> </ul> </li> <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\productos.png">Productos<span class="flecha">▼ </span></a> <ul> <li><a href="" class="mproducto">Modificar Productos<span class="flecha">▼ </span></a></li> <li><a href="" class="aproducto">Agregar Productos<span class="flecha">▼ </span></a></li> </ul> </li> <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\cliente.png">Clientes<span class="flecha">▼ </span></a> <ul> <li><a href="" class="mcliente">Modificar Clientes<span class="flecha">▼ </span></a></li> <li><a href="" class="acliente">Agregar Clientes<span class="flecha">▼ </span></a></li> <li><a href="" class="hcliente">Historial Clientes<span class="flecha">▼ </span></a></li> </ul> </li> <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\proveedor.png">Proveedores<span class="flecha">▼ </span></a> </li> <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\admin.png">Administración <span class="flecha">▼ </span></a> </li> </ul> <!-- Formulario popup conexion Base de datos --> <div id="popup"> <div id="popupconexion"> <form action="#" id="form" method="post" name="form"> <img id="closebutton" src="D:\Maizal\WebApp\Img\close_img_button.png" onclick="div_hide()"> <h4>Conectar Base de Datos</h4> <input id="user" name="Usuario" placeholder="Usuario" type="text"><br> <input id="pass" name="Contraseña" placeholder="Contraseña" type="password"><br> <input id="conectbutton" type="submit" value="Conectar"> </form> </div> </div> <!-- Boton Conexion Base de datos --> <button id="buttonpopupconexion" onclick="div_show()">Conectar BD</button> </body> </html>
Código HTML:
/* ------------------------------------- stylesheet para la homepage Maizal --------------------------------------*/ #Banner{ position: relative; left: 499px; } #homeicon{ width: 18px; height: 18px; } #homeiconmain{ width: 40px; height: 18px; } * { font-family: sans-serif; font-size: 16px; list-style: none; text-decoration: none; margin: 0; padding: 0; } .nav { margin-left: auto; margin-right: auto; width: 48%; } .nav > li { float: left; } .nav li a { background: #B6D06D; color: #FFF; display: block; padding: 10px 25.5px; } .nav li a:hover { background: #6A850C; } .nav li ul { display: none; position: absolute; min-width: 140px; } .nav li:hover > ul { display: block; } .nav li .flecha{ font-size: 12px; padding-left: 6px; display: none; } .nav li a:not(:last-child) .flecha{ display: inline; } #buttonpopupconexion{ position: absolute; top:0px; left: 500px; cursor: pointer; padding: 10px 5px; }
Código HTML:
//Validacion campos vacios function check_empty() { if (document.getElemntById('user').value == "" || document.getElemntById('pass').value == "") { alert("Datos Incompletos, Introduzca Usuario y/o contraseña!"); } else { document.getElemntById('form').submit(); } } //Funcion mostrar PopUp function div_show() { alert("Probando"); document.getElemntById('popup').style.display = "block"; } //Funcion esconder PopUp function div_hide() { document.getElemntById('popup').style.display = "none"; }
Código HTML:
/*---------------------------------------------------------- Stylesheet para ventana emergente conexion base de datos ----------------------------------------------------------*/ #popup{ width:100%; height:100%; opacity:.95; top:0; left:0; display:none; position:fixed; background-color:#313131; overflow:auto } img#closebutton { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; cursor: pointer; } div#popupconexion{ position: absolute; left: 50px; top: 20px; margin-left: -202px; font-family: sans-serif; } #form { max-width: 250px; min-width: 200px; padding: 5px 20px; border: 2px solid gray; border-radius: 5px; font-family: sans-serif; } h4 { background-color: #FEFFED; padding: 5px 15px; margin:-10px -50px; text-align: center; border-radius: 5px 5px 0 0; } input[type=text]{ width: 50%; padding: 5px; margin-top: 20px; border: 1px solid #ccc; font-size: 16px; }