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
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Matrix
- Efecto De Sombra Atras!
- Reproductor de musica
Imágen de perfil de ScriptShow

RE:Ventana Popup en forma modal

Publicado por ScriptShow (311 intervenciones) el 10/04/2009 16:00:45
  • ScriptShow se encuentra ahora conectado en el
  • chat de PHP
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

RE:Ventana Popup en forma modal

Publicado por ScriptShow (311 intervenciones) el 10/04/2009 18:53:06
  • ScriptShow se encuentra ahora conectado en el
  • chat de PHP
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