Como sacar un pop-up de un form

eduardodp · #1 (**permalink**) 03/01/2013, 18:16

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 .

David · #2 (**permalink**) 03/01/2013, 18:34

Usando el atributo target del formulario:
http://www.w3schools.com/tags/att_form_target.asp

eduardodp · #3 (**permalink**) 04/01/2013, 11:14

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

informacionsys · #4 (**permalink**) 04/01/2013, 11:21

Código HTML:

Ver original<!DOCTYPE html>
<html>
<title>Practica AJAX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<head>
<style type="text/css">
*{padding:0;margin:0}
.miclase {
background:url("../images/trans.png");
height:3000px;
position:fixed;
width:100%;
z-index:20;
display:none;
}
 
#mostrar, #cerrar{
    background:#f60;
    border-radius:10px 10px 10px 10px;
    width:100px;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-family:Calibri;
    cursor:pointer;         
}
</style>
 
<script language="javascript">
$(document).ready(function(){
    $("#mostrar").click(function(){$("#popup").fadeIn("slow")})
    $("#cerrar").click(function(){$("#popup").fadeOut();})
})
</script>
</head>
<body>
    <div id="popup" class="miclase">
        <div style="width:500px;margin:10% auto;background-color:#f60;">            
            <div style="">Sistema</div>
            <div style="background-color:#333;width:120px;" id="cerrar">Cerrar</div>
        </div>
    </div>
    <div id="mostrar">Ver Popup</div>
</body>
</html>

eduardodp · #5 (**permalink**) 04/01/2013, 13:27

Perfecto me han dado ideas para implementarlo

emprear · #6 (**permalink**) 04/01/2013, 14:36

Cita:

Iniciado por eduardodp

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="nv2.php" method="post" target="Nventana" onsubmit="window.open('', 'Nventana', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes')"> 
<input type="text" name="nombre">
<input type="submit" />
</form>
</body>
</html>

nv2.php

Código PHP:

Ver original<p>
    Correo enviado por: <b>
<?php
echo $_POST['nombre'];
?>
</b>
<br /><br />
<button onclick="self.close();">cerrar</button>
</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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
html, body{
padding: 0;
margin:0;
border:none;
height: 100%;
}
#opaca{
display: none;
width: 100%;
height: 100%;
border: none;
background: #000;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
#pop{
width: 400px;
height: 300px;
margin: 200px auto;
background: lime;
border-radius : 8px;
padding: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function mostrar(){
document.getElementById('opaca').style.display = "block";
setTimeout('resetear()',800);
}
 
function ocultar(){
document.getElementById('destino').src = "about:blank";
document.getElementById('opaca').style.display = "none";
}
 
function resetear(){
document.getElementById('formulario').reset();
}
//]]>
</script>
</head>
<body>
<form action="nv.php" method="post" target="destino" onsubmit="mostrar();" id="formulario"> 
<input type="text" name="nombre" id="nombre" />
<input type="submit" />
</form>
<div id="opaca">
<div id="pop">
<iframe src="about:blank" frameborder="0" scrolling="no" name="destino" id="destino"></iframe>
</div>
</div>
</body>
</html>

nv.php

Código PHP:

Ver original<p>
Correo enviado por: <b>
<?php
echo $_POST['nombre'];
?>
</b>
<br /><br />
<button onclick="cerrar();">cerrar</button>
</p>
<script type="text/javascript">
//<![CDATA[
/* script */
function cerrar(){
parent.ocultar();
}
//]]>
</script>

SAludos