Ver Mensaje Individual
  #6 (permalink)  
Antiguo 04/01/2013, 14:36
Avatar de emprear
emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
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.