Foros del Web » Programando para Internet » Javascript »

Como sacar un pop-up de un form

Estas en el tema de Como sacar un pop-up de un form en el foro de Javascript en Foros del Web. Hola amigos del foro Me he trabado un poquito con un formulario. Les explico: Tengo una pagina con este form Código HTML: <form action= "correo.php" ...
  #1 (permalink)  
Antiguo 03/01/2013, 18:16
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 7 meses
Puntos: 1
Como sacar un pop-up de un form

Hola amigos del foro
Me he trabado un poquito con un formulario.
Les explico:
Tengo una pagina con este form
Código HTML:
<form action="correo.php" method="POST">
<input type="text" name="nombre" id="nombre">
<input type="text" name="telefono" id="telefono">
<input type="text" name="email" id="email">

<input type="submit" name="enviar" > 
y en la pagina de correo.php
Tengo una condicion en que si se cumplen todos los datos saque una imagen que dice "Correo enviado" y mi pregunta es como saco la pagina Correo.php como un pop-up .
  #2 (permalink)  
Antiguo 03/01/2013, 18:34
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 3 meses
Puntos: 839
Respuesta: Como sacar un pop-up de un form

Usando el atributo target del formulario:
http://www.w3schools.com/tags/att_form_target.asp
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 04/01/2013, 11:14
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Como sacar un pop-up de un form

Gracias @David ahora lo que quiciera saber es como convertir mi pagina correo.php en un pop-up como este
que ponga "semi-transparente" el fondo que se pueda ver mi pagina de fondo eso es lo que me haria falta Gracias

Bendiciones
  #4 (permalink)  
Antiguo 04/01/2013, 11:21
Avatar de informacionsys  
Fecha de Ingreso: mayo-2011
Ubicación: Bogota D.C
Mensajes: 793
Antigüedad: 13 años, 2 meses
Puntos: 76
Respuesta: Como sacar un pop-up de un form

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <title>Practica AJAX</title>
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  4. <style type="text/css">
  5. *{padding:0;margin:0}
  6. .miclase {
  7. background:url("../images/trans.png");
  8. height:3000px;
  9. position:fixed;
  10. width:100%;
  11. z-index:20;
  12. display:none;
  13. }
  14.  
  15. #mostrar, #cerrar{
  16.     background:#f60;
  17.     border-radius:10px 10px 10px 10px;
  18.     width:100px;
  19.     text-align:center;
  20.     color:#fff;
  21.     font-weight:bold;
  22.     font-family:Calibri;
  23.     cursor:pointer;        
  24. }
  25.  
  26. <script language="javascript">
  27. $(document).ready(function(){
  28.     $("#mostrar").click(function(){$("#popup").fadeIn("slow")})
  29.     $("#cerrar").click(function(){$("#popup").fadeOut();})
  30. })
  31. </head>
  32.     <div id="popup" class="miclase">
  33.         <div style="width:500px;margin:10% auto;background-color:#f60;">           
  34.             <div style="">Sistema</div>
  35.             <div style="background-color:#333;width:120px;" id="cerrar">Cerrar</div>
  36.         </div>
  37.     </div>
  38.     <div id="mostrar">Ver Popup</div>
  39. </body>
  40. </html>

Última edición por informacionsys; 04/01/2013 a las 11:27
  #5 (permalink)  
Antiguo 04/01/2013, 13:27
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Como sacar un pop-up de un form

Perfecto me han dado ideas para implementarlo
  #6 (permalink)  
Antiguo 04/01/2013, 14:36
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años
Puntos: 1567
Respuesta: Como sacar un pop-up de un form

Cita:
Iniciado por eduardodp Ver Mensaje
Perfecto me han dado ideas para implementarlo
Son dos cosas diferentes las que planteas, para un pop up (como ventana), necesitás combinar el target como te han dicho, con window.open
Form 1
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. </head>
  7. <form action="nv2.php" method="post" target="Nventana" onsubmit="window.open('', 'Nventana', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes')">
  8. <input type="text" name="nombre">
  9. <input type="submit" />
  10. </form>
  11. </body>
  12. </html>

nv2.php

Código PHP:
Ver original
  1. <p>
  2.     Correo enviado por: <b>
  3. <?php
  4. echo $_POST['nombre'];
  5. ?>
  6. </b>
  7. <br /><br />
  8. <button onclick="self.close();">cerrar</button>
  9. </p>

En el caso de la capa opaca, tenés que valerte de un iframe y algo de js y css

form 2
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. html, body{
  10. padding: 0;
  11. margin:0;
  12. border:none;
  13. height: 100%;
  14. }
  15. #opaca{
  16. display: none;
  17. width: 100%;
  18. height: 100%;
  19. border: none;
  20. background: #000;
  21. position: absolute;
  22. top: 0;
  23. left: 0;
  24. opacity: 0.8;
  25. }
  26. #pop{
  27. width: 400px;
  28. height: 300px;
  29. margin: 200px auto;
  30. background: lime;
  31. border-radius : 8px;
  32. padding: 0;
  33. }
  34. /*]]>*/
  35. <script type="text/javascript">
  36. //<![CDATA[
  37. function mostrar(){
  38. document.getElementById('opaca').style.display = "block";
  39. setTimeout('resetear()',800);
  40. }
  41.  
  42. function ocultar(){
  43. document.getElementById('destino').src = "about:blank";
  44. document.getElementById('opaca').style.display = "none";
  45. }
  46.  
  47. function resetear(){
  48. document.getElementById('formulario').reset();
  49. }
  50. //]]>
  51. </head>
  52. <form action="nv.php" method="post" target="destino" onsubmit="mostrar();" id="formulario">
  53. <input type="text" name="nombre" id="nombre" />
  54. <input type="submit" />
  55. </form>
  56. <div id="opaca">
  57. <div id="pop">
  58. <iframe src="about:blank" frameborder="0" scrolling="no" name="destino" id="destino"></iframe>
  59. </div>
  60. </div>
  61. </body>
  62. </html>

nv.php

Código PHP:
Ver original
  1. <p>
  2. Correo enviado por: <b>
  3. <?php
  4. echo $_POST['nombre'];
  5. ?>
  6. </b>
  7. <br /><br />
  8. <button onclick="cerrar();">cerrar</button>
  9. </p>
  10. <script type="text/javascript">
  11. //<![CDATA[
  12. /* script */
  13. function cerrar(){
  14. parent.ocultar();
  15. }
  16. //]]>
  17. </script>

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: formulario, php, pop-up
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:55.