Window open o Pantallas Javascript

fmb1982 · #1 (**permalink**) 30/04/2013, 18:44

Alguien me puede recomendar como puedo usar pantallas emergentes a manera de mandar a llamar un formulario bloqueando la pantallas de atras, algo asi como en fb que le picas abre la pantalla y bloquea la parte de atras hasta que te sales, todo esto sin recargar el browser.... de preferencias javascript o php!! de manera facil no soy experto una funcion o libreria ... saludos y gracias por su apoyo...

emprear · #2 (**permalink**) 01/05/2013, 06:46

Algunos ejemplos y variantes

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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Overlay</title>
<style type="text/css">
/*<![CDATA[*/
html,body{
height: 100%;
margin: 0;
padding: 0;
border: none;
}
#ocultar{
 display: none;
 position:fixed;
 background:#000;
 width: 100%;
 height: 100%;
 opacity: 0.8;
 margin: 0;
 padding: 0;
 border: none;
 top:0;
 left:0;
 z-index: 999;
text-align: center;
padding-top: 200px;
overflow:hidden;
 }
 
#cerrar{
background: red;
color: #FFF;
border: solid red 2px;
border-radius: 5px;
position: absolute;
z-index: 1000;
text-align: center;
cursor: pointer;
width: 100px;
padding: 8px;
top: 40%;
left: 50%;
margin-left: -50px;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
 
 function ocultar(){
 document.getElementById('ocultar').style.display ="block";
 }
 function desactivar(){
document.getElementById('hola').disabled = true;
}
//]]>
</script>
 
</head>
<body>
<div id="ocultar"><div onclick="this.parentNode.style.display ='none';" id="cerrar">cerrar</div></div>
<button onclick="ocultar();">ocultar todo</button>
<h1>xxxx</h1>
<h2>xxxxx</h2>
<button onclick="desactivar()">alerta</button>
<form action="#">
<input type="text" value="hola" name="hola" id="hola" />
</form>
</body>
</html>

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[*/
 
div#ns {
position: fixed;
width: 100%;
height:100%;
background-color: #000;
color: #FFF;
top:0px;
left:0px;
z-index: 999;
overflow:hidden;
opacity: 0.9;
display: none;
}
 
div.interior{
position:absolute;
top: 50%;
left: 50%;
width:350px;
height:300px;
margin-top: -150px; /*valor negativo mitad del alto*/
margin-left: -175px; /*valor negativo mitad del ancho*/
border: 2px solid #2982C6;
background-color: red;
text-align: center;
z-index: 999;
}
 
/*]]>*/
</style>
 
</head>
<body>
<div id="ns">
<div class="interior">
otro contenido<br />
<span onclick="document.getElementById('ns').style.display='none';" style="cursor: pointer; color: #000;">cerrar</span>
</div>
</div>
 
<h1>Título</h1>
<span onclick="document.getElementById('ns').style.display='block';" style="cursor: pointer;">popup</span>
</body>
</html>

http://foros.emprear.com/jquerye/jqm...al-window.html

Saludos

fmb1982 · #3 (**permalink**) 01/05/2013, 07:55

oye estoyleyendo el codigo pero lo que yo quiero no es mandar un mensaje, quiero sacar la ventana emergente con otra url, es decir mandar a llamar otro formulario que ejecute un codigo de php si me explico??

angelAparicio · #4 (**permalink**) 01/05/2013, 08:09

Prueba con fancybox: http://fancybox.net/blog

Creo que el ejemplo "5. Display login form Try now" es lo que buscas. Debajo viene el código a usar.

emprear · #5 (**permalink**) 01/05/2013, 08:30

Cita:

Iniciado por fmb1982

oye estoyleyendo el codigo pero lo que yo quiero no es mandar un mensaje, quiero sacar la ventana emergente con otra url, es decir mandar a llamar otro formulario que ejecute un codigo de php si me explico??

Eso no altera el método.
Dentro del contenido a mostrar podés poner un iframe, además si fuese un form el action puede ser otra url

Si usás solo un window.open no te va a quedar la pantalla de fonddo "bloqueada", y el ejemplo que te propone @angelAparicio no difiere del link que te dejé
http://foros.emprear.com/jquerye/jqm...al-window.html
Saludos