Hola a todos
Estoy haciendo una pagina web, para el trabajo ...
Estoy tratando de implementar un boton que sea PopUp, y que este tenga el <form> para conectar a la base de datos (Usuario, Password, botones Conectar, Cerrar)
He seguido diferentes ejemplos en paginas web, pero nunca me terminan de funcionar, no se que tendre mal o que, y espero me pueda ayudar.
PD: la ultima pagina en la que me base para hacer el popup, es esta: http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Aca dejo el codigo de los archivos:
Index, pagina principal, Home
Archivo CSS maquetacion pagina principal
Archivo maquetacion para el PopUp
Archivo JS, para funcion de mostrar, esconder PopUp
Bueno, eso es todo, espero me puedan ayudar, Gracias de antemano.
Estoy haciendo una pagina web, para el trabajo ...
Estoy tratando de implementar un boton que sea PopUp, y que este tenga el <form> para conectar a la base de datos (Usuario, Password, botones Conectar, Cerrar)
He seguido diferentes ejemplos en paginas web, pero nunca me terminan de funcionar, no se que tendre mal o que, y espero me pueda ayudar.
PD: la ultima pagina en la que me base para hacer el popup, es esta: http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Aca dejo el codigo de los archivos:
Index, pagina principal, Home
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>
Archivo CSS maquetacion pagina principal
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 23.4px;
}
.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;
}
Archivo maquetacion para el PopUp
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;
}
Archivo JS, para funcion de mostrar, esconder PopUp
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() {
document.getElemntById('popup').style.display = "block";
}
//Funcion esconder PopUp
function div_hide() {
document.getElemntById('popup').style.display = "none";
}
Bueno, eso es todo, espero me puedan ayudar, Gracias de antemano.