Buenas a todos.
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>
homepage.css
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;
}
popupconexion.js
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";
}
popupconexion.css
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;
}