Ventana modal con xHTML CSS

ZiTAL · #1 (**permalink**) 21/05/2008, 02:24

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.

albertcito · #2 (**permalink**) 22/05/2008, 02:26

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 ;)

ZiTAL · #3 (**permalink**) 22/05/2008, 02:52

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

twisterska · #4 (**permalink**) 14/10/2008, 18:24

Pues a mi me va perfecto :S muy interesante el codigo, gracias

chuntin · #5 (**permalink**) 04/04/2011, 02:20

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>

chuntin · #6 (**permalink**) 05/07/2011, 10:44

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

ZiTAL · #7 (**permalink**) 05/07/2011, 12:11

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

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

suerte

chuntin · #8 (**permalink**) 06/07/2011, 00:21

Cita:

Iniciado por ZiTAL

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

ZiTAL · #9 (**permalink**) 06/07/2011, 03:55

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

Aquí tienes los demos para bajarte, mira el código para ver los ejemplos.

chuntin · #10 (**permalink**) 07/07/2011, 05:02

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.