Problema con PopUp Javascript 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;
}
