PopUp en pagina (ayuda)

Kaamos · 23 Mar 2015

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

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">&#9660 </span></a></li>
      
        <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\bodega.png">  Bodega<span class="flecha">&#9660 </span> </a>
            <ul>
                <li><a href="D:\Maizal\WebApp\Pages\historiapedidos.html" class="hpedidos">Historial Pedidos<span class="flecha">&#9660 </span></a></li>
                <li><a href="" class="inventario">Inventario<span class="flecha">&#9660 </span></a></li>
                <li><a href="" class="apedido">Agregar Pedido<span class="flecha">&#9660 </span></a></li>
            </ul>
        </li>  
      
        <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\productos.png"> Productos<span class="flecha">&#9660 </span></a>
            <ul>
                <li><a href="" class="mproducto">Modificar Productos<span class="flecha">&#9660 </span></a></li>
                <li><a href="" class="aproducto">Agregar Productos<span class="flecha">&#9660 </span></a></li>
            </ul>
        </li>  
      
        <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\cliente.png"> Clientes<span class="flecha">&#9660 </span></a>
            <ul>
                <li><a href="" class="mcliente">Modificar Clientes<span class="flecha">&#9660 </span></a></li>
                <li><a href="" class="acliente">Agregar Clientes<span class="flecha">&#9660 </span></a></li>
                <li><a href="" class="hcliente">Historial Clientes<span class="flecha">&#9660 </span></a></li>
            </ul>
        </li>
      
        <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\proveedor.png">  Proveedores<span class="flecha">&#9660 </span></a>
        </li>
      
        <li><a href=""><img id="homeicon" src="D:\Maizal\WebApp\Img\admin.png">  Administraci&oacuten <span class="flecha">&#9660 </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&#241a" 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.

hegrog · 29 Abr 2015

Hola, no quiero ahondar mucho en el tema. Pero básicamente tienes un error desde el inicio y la planeación del desarrollo.

Básicamente estas dando rutas estáticas a cada uno de tus archivos. Es decir, tratas de abrirlo con la ruta que te entrega el sistema operativo en tu caso: "D:\Maizal\WebApp\..*" El problema de esto, es que si llegas a mover uno sólo de los archivos se te pueden dañar muchas cosas. Aunque me imagino que lo trabajas desde tu equipo lo cual es totalmente válido.

Lo otro que puedo ver, es que tiene un error en las funciones escritas en el archivo .JS en las líneas donde están los métodos "getElementById", te falta la tercera letra e, de Element. Eso hace que no responda la función. No con que programes, pero debes tratar de tener una aplicación que te pueda revisar la sintaxis, créeme que ahorra bastante tiempo. Por ejemplo, NOTEPAD ++ al cual le puedes indicar que estas programando en javascript como lenguaje.

Ya a mi parecer y creo que peco por ignorancia, es que el botón que tiene para desplegar la función de mostrar el popup, es funcional, se llama a la función y esta se ejecuta. Pero no hay nada en el formulario del popup, que te pueda validar, las otras funciones. Es decir, no se esta frenando el submit, y aplicar la validación para poder continuar o no. No se si este punto es claro. Sólo tienes la función pero no la llamas en ningún lugar del HTML. Solo haces un submit, así que la función queda en el limbo. Debes llamarla al igual que lo haces con el botón de llamar el popup.

Podría ser algo como esto, que creo queda feo, y se puede mejorar, al igual que todo lo demás.

<code>
1. 
2. <div id="popup">
4. <div id="popupconexion">
5. <form action="#" id="form" method="post" name="form">
6. <img id="closebutton" src="D:\Maizal\WebApp\Img\close_img_button.png" onclick="div_hide()">
7. <h4>Conectar Base de Datos</h4>
8. <input id="user" name="Usuario" placeholder="Usuario" type="text"><br>
9. <input id="pass" name="Contraseña" placeholder="Contrase&#241a" type="password"><br>
10. <input id="conectbutton" type="submit" value="Conectar" onclick="check_empty()">
</form>
</div>
</div>
</code>

Mira que en la línea 10, agregué un evento, onclick, en el cual hago el llamado a la función.

No se, si sea de ayuda lo que te acabó de explicar. Lo demás es mejorar un poco las hojas de estilos que las veo un poco enredadas, pero me imagino que estas probando. Por último mucho cuidado con lo que te vayas a conectar, nada de dejar código del lado del cliente que ahí es donde se hacen unos huecos terribles.

Saludos, me cuentas como te fue.

Buscar

Buscar

PopUp en pagina (ayuda)

Kaamos

Lanero Reconocido

hegrog

Lanero Regular

Los últimos mensajes

Los últimos temas