Foros del Web » Creando para Internet » HTML »

Ventana modal con xHTML CSS

Estas en el tema de Ventana modal con xHTML CSS en el foro de HTML en Foros del Web. Hola a todos, ayer me decidí a hacer una ventana modal y me salio esto: Código HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ...
  #1 (permalink)  
Antiguo 21/05/2008, 02:24
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años
Puntos: 62
De acuerdo Ventana modal con xHTML CSS

Hola a todos, ayer me decidí a hacer una ventana modal y me salio esto:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<script type="text/javascript">
<!--
function toogle()
 {
 	var params=toogle.arguments;
 	for(var i=1;i<params.length;i++)
 	 { 	  
 	   document.getElementById(params[i]).style.display=params[0];
 	 } 
 }
//--> 
</script>
<style type="text/css">
html, body
 {
	height: 100%;
	width: 100%;
	margin: 0;
	paddin: 0;
	overflow: hidden; 
 }
#kba
 {
	height: 100%;
	width: 100%;
	overflow: auto; 	
 } 
#modal
 {
 	position: absolute;
 	padding: 0;
 	margin: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 50;
 	filter: alpha(opacity=50);
 	opacity: 0.5;
 	-moz-opacity:0.5;
 	background-color: #808080;
 	left: 0;
 	top: 0;
 	overflow: auto;
 }
#mContainer
 {
 	position: absolute;
 	left: 25%;
 	top: 25%;
 	background-color: #000000;
 	color: #ffffff;
 	width: 50%;
 	height: 50%; 
 	z-index: 100;
 	filter: alpha(opacity=100); 	
 	opacity: 1; 	
 	-moz-opacity:1;
 } 
</style>
</head>
<body>
<div id="kba">
<input type="button" id="open" value="fopen" onclick="toogle('block','modal','mContainer')"/>
asdsad
sad
sa
ds
ad
sad
sa
dsa
d<br />asdsad
sad
sa
ds
ad
sad
sa
dsa
d<br />asdsad
sad
sa
ds
ad
(aqui copias y pegas todo este churro para ver la barra de desplazamiento horizontal)
</div>
<div id="modal" style="display:none">
	<div id="mContainer" style="display:none">
	asdsaddsadasd 
	<input id="close" type="button" value="X" onclick="toogle('none','modal','mContainer')"/> 
	</div>
</div>
</body>
</html> 
No se si es el foro indicado pero bueno.

Lo he probado en IE6, IE7 portable y firefox y funciona en todas.

Si alguien tiene algun aporte que lo diga, espero que os guste.
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #2 (permalink)  
Antiguo 22/05/2008, 02:26
 
Fecha de Ingreso: diciembre-2007
Mensajes: 169
Antigüedad: 9 años, 3 meses
Puntos: 6
Respuesta: Ventana modal con xHTML CSS

Buena compadre esta excelente!!! Justo me estaba preguntado como se hacia una de esas jajaja :D que suerte la mía, me ahorro trabajo :D

Pero como sugerencia podrías hacer que si una persona pincha fuera del cuadro igual desapareciera!

eso y muchas gracias quedo muy bien ;)
  #3 (permalink)  
Antiguo 22/05/2008, 02:52
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años
Puntos: 62
De acuerdo Respuesta: Ventana modal con xHTML CSS

mira tu que facil:

añade este codigo a
Código HTML:
.. onclick="toogle('none','modal','mContainer')" ...
Código HTML:
...
<div id="modal" style="display:none" onclick="toogle('none','modal','mContainer')>
...

Edito, no funciona del todo bien :S
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan

Última edición por ZiTAL; 22/05/2008 a las 03:00
  #4 (permalink)  
Antiguo 14/10/2008, 18:24
Avatar de twisterska  
Fecha de Ingreso: agosto-2008
Mensajes: 51
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Ventana modal con xHTML CSS

Pues a mi me va perfecto :S muy interesante el codigo, gracias
  #5 (permalink)  
Antiguo 04/04/2011, 02:20
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Ventana modal con xHTML CSS

partiendo de tu codigo... intento poner el enlace en una palabra (que no sea con input) y que en el div se muestre un video de youtube,vimeo o alguno de estos.


pero hace mencion de abrirse pero se cierra al instante.

sabeis como solucionarlo???

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<script type="text/javascript">
<!--
function toogle()
 {
 	var params=toogle.arguments;
 	for(var i=1;i<params.length;i++)
 	 { 	  
 	   document.getElementById(params[i]).style.display=params[0];
 	 } 
 }
//--> 
</script>
<style type="text/css">
html, body
 {
	height: 100%;
	width: 100%;
	margin: 0;
	paddin: 0;
	overflow: hidden; 
 }
#kba
 {
	height: 100%;
	width: 100%;
	overflow: auto; 	
 } 
#modal
 {
 	position: absolute;
 	padding: 0;
 	margin: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 50;
 	filter: alpha(opacity=50);
 	opacity: 0.5;
 	-moz-opacity:0.5;
 	background-color: #808080;
 	left: 0;
 	top: 0;
 	overflow: auto;
 }
#mContainer
 {
 	position: absolute;
 	left: 25%;
 	top: 25%;
 	background-color: #000000;
 	color: #ffffff;
 	width: 50%;
 	height: 50%; 
 	z-index: 100;
 	filter: alpha(opacity=100); 	
 	opacity: 1; 	
 	-moz-opacity:1;
 } 
</style>
</head>
<body>
<div id="kba">
<!--<input type="button" id="open" value="fopen" onclick="toogle('block','modal','mContainer')"/>-->
<a href="" id="open" value="fopen" onclick="toogle('block','modal','mContainer')">asdsad</a>
sad
sa
ds
ad
sad
sa
dsa
d<br />asdsad
sad
sa
ds
ad
sad
sa
dsa
d<br />
asdsad
sad
sa
ds
ad

</div>
<div id="modal" style="display:none">
	<div id="mContainer" style="display:none">
    <input align="right" id="close" type="button" value="X" onclick="toogle('none','modal','mContainer')"/> 
	<iframe title="YouTube video player" width="auto" height="auto" src="http://www.youtube.com/embed/idoOrAlQcaY" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
</body>
</html> 
  #6 (permalink)  
Antiguo 05/07/2011, 10:44
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Ventana modal con xHTML CSS

hay alguna forma de hacer esto sin el iframe??? esque tengo un joomla y cargo este codigo en un html aparte que cargo dentro del joomla y solo se me abre en el trozo del html. querria que se habriese a pantalla completa


mirar lo que pasa:
http://www.eurocierre.com/index.php?...pper&Itemid=55

pinchar en puertas de ballesta para verlo
  #7 (permalink)  
Antiguo 05/07/2011, 12:11
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años
Puntos: 62
Respuesta: Ventana modal con xHTML CSS

hace mucho que me pasé a jquery, aquíi una modal con jquery:

http://www.ericmmartin.com/projects/simplemodal-demos/

suerte
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #8 (permalink)  
Antiguo 06/07/2011, 00:21
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Ventana modal con xHTML CSS

Cita:
Iniciado por ZiTAL Ver Mensaje
hace mucho que me pasé a jquery, aquíi una modal con jquery:

http://www.ericmmartin.com/projects/simplemodal-demos/

suerte
no tengo ni idea de como usar esto. no entiendo lo que explica. me puedes echar una mano?? gracias
  #9 (permalink)  
Antiguo 06/07/2011, 03:55
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años
Puntos: 62
Respuesta: Ventana modal con xHTML CSS

http://code.google.com/p/simplemodal/downloads/list

Aquí tienes los demos para bajarte, mira el código para ver los ejemplos.
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #10 (permalink)  
Antiguo 07/07/2011, 05:02
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Ventana modal con xHTML CSS

al final lo dejo como tenia el ejemplo pero ahora tengo un problema que si tengo varios en una misma pagina solo me carga el primero en todos aunque apunte a diferentes enlaces.


ayudaaaaaaaaaaaaaaa. me estoy volviendo loco ya.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 18:50.