Pop up interna con overlay

daffyduck · #1 (**permalink**) 14/02/2012, 18:03

Hola, soy nuevo en este foro, llevo un tiempo buscando cosas aqui, pero hoy al no encontrar la respuesta a mi duda he tenido que postearla :D

Mi duda es cómo hacer una Pop Up interna, que salte dentro de la web. Pero no quiero hacerla con jQuery, sino con javascript. Dentro de la Pop Up quiero introducir un iframe.

Una imagen para ilustrar lo que quiero hacer:

como se puede ver, el fondo esta oscurecido, y todo lo amarillo seria un div que contendría un iframe, pero quiero hacer esto sin el uso de jquery :S

si podéis ayudarme os lo agradecería mucho, un saludo

goteen_mx · #2 (**permalink**) 14/02/2012, 18:10

Tendrías que programarlo de forma manual, solo necesitas 2 divs, 1 para le fondo y otro para el contenido y asignarles un z-index adecuado para que se superponga uno a otro y darle formato ya sea con css o directamente en el style.

Saludos.

caricatos · #3 (**permalink**) 14/02/2012, 18:16

Hola:

Pues un popup es una ventana para una página... pero las ventanas del tipo lightbox son capas y normalmente no se mueven y en vez de cargar páginas suelen usarse para imágenes...

Lo más parecido que hice a lo que creo que quieres, está en esta página: Pseudo-lightbox.

Como no sé si te interesará el texto te cuento como implementarlo: el oscurecimento gradual se consigue tapando la página con una capa transparente y con estilos ir variando la opacidad; y encima monerle una capa, que podría tener en su interior un iframe... Con estos datos podrías animarte a intentarlo, y si tienes problemas, comentárnoslo.

Saludos

emprear · #4 (**permalink**) 14/02/2012, 18:29

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">
aqui el iframe
</div>
</div>
 
<h1>Título</h1>
<span onclick="document.getElementById('ns').style.display='block';" style="cursor: pointer;">popup</span>
</body>
</html>

Saludos

daffyduck · #5 (**permalink**) 15/02/2012, 16:12

Muchas gracias por vuestras respuestas, me han ayudado mucho para orientarme :) vere que tal sale todo y os comento, un saludo! :)

daffyduck · #6 (**permalink**) 19/02/2012, 18:21

Hola a todos de nuevo, me gustaria saber si es posible generar un "<style></style>" en el head con Javascript y que posteriormente se cree un div que utilize ese style :S

Podeis decirme si se puede hacer? quizas con document.write pero no se como hacerlo exactamente

Un saludo y gracias :)

emprear · #7 (**permalink**) 19/02/2012, 21:25

Parece que editaste el mensaje, esto no lo encuentro

Cita:

Hola a todos de nuevo, no he tenido un buen resultado :( He hecho lo siguiente, lo podéis ver aquí:

http://213.162.195.67/over2.html

Funciona bien, pero la opacidad afecta al contenido del iFrame, no se como solucionarlo, ¿ podéis ayudarme? Muchas gracias

Y tu último post no se si se vincula a tu consulta original o no

SAludos

daffyduck · #8 (**permalink**) 20/02/2012, 04:27

Si, es que en el ultimo momento, me di cuenta del problema y lo arregle, entonces necesitaba saber lo ultimo que edite, claro que tienes razon, no tiene vinculacion, mejor creare un nuevo post.

Un saludo a todos:)

emprear · #9 (**permalink**) 20/02/2012, 07:13

ok, esperemos por el nuevo post, y preferentemente hacelo en el foro de Javascript, ya que en definitiva querés que todo se genere al vuelo con js
Saludos