HTML - Ventana Popup en forma modal

 
Vista:

Ventana Popup en forma modal

Publicado por tipitipi (21 intervenciones) el 08/04/2009 23:59:43
Hola a todos:

Alguien me podría decir como se puede poner una ventana popup de forma modal sobre la página que la genere ??. Es decir, yo genero desde una pagina una ventana popup y esta me bloquea la pagina principal.

Muchas Gracias y Saludos a todos !!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

RE:Ventana Popup en forma modal

Publicado por ScriptShow (409 intervenciones) el 10/04/2009 16:00:45
Saludos,

Unos ejemplos basados en AJAX, DHTML, Etc.:

http://www.cssrevolt.com/upload/files/zoomy-v2/

http://www.huddletogether.com/projects/lightbox/

http://orangoo.com/labs/?page_id=5

http://particletree.com/examples/lightbox/

http://jquery.com/demo/thickbox/#

Unos ejemplos basados en JavaScript, CSS, muy simple:

http://www.emanueleferonato.com/downloads/lightbox.html

http://samples.unijimpe.net/css-lightbox.html

Varios enlaces relacionados:

http://webdeveloper.econsultant.com/css-lightbox-variations/

Entre todos encontrarás alguno que se ajuste a tus necesidades. Tienes para un rato si visitas todos los enlaces. Vale la pena sólo por ver algunos trabajos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

RE:Ventana Popup en forma modal

Publicado por ScriptShow (409 intervenciones) el 10/04/2009 18:53:06
Saludos,

para evitar los bloqueos de popup que tienen la mayoría de los navegadores, y hacer algo así, utilizo una sencilla forma:

<html>
<head>
<title>Modal Layer</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
body { font-size:16px; font-family:verdana; }
#matte { position:absolute; left:0px; top:0px; width:102%; height:100%; z-index:2; text-align:center;
background-color:#000000;
filter:alpha(opacity=80);
-khtml-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
display:none;
}
// -->
</style>
<script type="text/javascript">
<!--
function showlayer(txt){
document.getElementById("matte").innerHTML="<br><strong style='color:#DDDDDD'>[ TEXTO: "+txt+" ]</strong><br><p align=center><input type=button value=cerrar onclick='hidelayer(null)'></p>";
document.getElementById("bodId").style.overflow="hidden";
document.getElementById("matte").style.display="block"
}

function hidelayer(txt){
document.getElementById("matte").innerHTML="<br><strong style='color:#DDDDDD'>[ TEXTO: "+txt+" ]</strong><br><p align=center><input type=button value=cerrar onclick='hidelayer(null)'></p>";
document.getElementById("bodId").style.overflow="auto";
document.getElementById("matte").style.display="none";
}
// -->
</script>
</head>
<body id="bodId">
<div id="matte"></div>
<a href="#" class="" onclick="showlayer('COMENTARIO, ETC... 1');this.blur();return false">Link 1</a>
<a href="#" class="" onclick="showlayer('COMENTARIO, ETC... 2');this.blur();return false">Link 2</a>
<a href="#" class="" onclick="showlayer('COMENTARIO, ETC... 3');this.blur();return false">Link 3</a>
<a href="#" class="" onclick="showlayer('COMENTARIO, ETC... 4');this.blur();return false">Link 4</a>
<marquee width="100%" height="140" align="middle" behavior="scroll" scrolldelay="20" direction="left" scrollamount="2" truespeed><strong style="color:#DDDDDD">[ MARQUESINA ANUNCIOS ]</strong></marquee>
<strong>C O N T E N I D O S P O S I B L E S [ Texto, Fotos, Otros ]</strong><p><a href="http://scriptshow.wordpress.com">scriptshow © 2009</a></p>
</body>
</html>

Está basada en un script que hice para una presentación de fotos. Adaptándolo, es posible hacer otras muchas cosas: con un IFRAME, se puede presentar otra página; como está, puede presentar avisos, textos, formularios, imágenes, etc. con muy pocos cambios.

PD: En el otro post, hay varios enlaces relacionados con proyectos más complejos tipo Light-Box, aunque es posible que no precises de ellos para algo tan básico. Tú eliges...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar