Foros del Web - Ver Mensaje Individual - Como sacar un pop-up de un form

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