Ventana emergente con contenido HTML

RealTincho · #1 (**permalink**) 06/09/2012, 19:31

Hola, qe tal.. soy nuevo en esto de programacion con HTML,, y necesitaba saber como puedo hacer para qe al apretar una imagen se abra una ventana emergente en donde tenga contenido tambien en HTML,, osea, en ves de qe aparezca un simple texto, qe por ejemplo, pueda agregarle el code de un reproductor, o un formulario (yo ya cuento con el code del contenido). o simplemente qe éste html del reproductor o formulario aparezca flotando al presionar la imagen, sin necesidad de hacerlo desde la ventana emergente. desde ya muchas gracias :)

flashmax · #2 (**permalink**) 06/09/2012, 20:15

No se si te entendí bien quieres hacer algo asi:
http://www.jacklmoore.com/colorbox/example1/

RealTincho · #3 (**permalink**) 06/09/2012, 21:12

sisisi!! pero qe se abra el contenido de un HTML qe ya tengo, qe es una formulario de mensajes :)

flashmax · #4 (**permalink**) 07/09/2012, 09:37

prueba utilizando este Outside Webpage (Iframe) te cargaría tu html

RealTincho · #5 (**permalink**) 07/09/2012, 15:38

El "Inline HTML" creo qe es el apropiado.. pero, de donde consigo los datos? cuales son los codes qe debería colocar entonces?? :S

flashmax · #6 (**permalink**) 07/09/2012, 18:48

Código HTML:

<html>
	<head>
		<meta charset='utf-8'/>
		<title></title>
		<link rel="stylesheet" href="colorbox.css" />
		<script src="jquery.min.js"></script>
		<script src="jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
                $(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>
	</head>
	<body>
		
		<p><a class='inline' href="#inline_content">Abrir formulario</a></p>

		
		<!-- This contains the hidden content for inline calls -->
		<div style='display:none'>
			<div id='inline_content' style='padding:10px; background:#fff;'>
			<p><strong><form action="" method="get">
            <input name="" type="text">
            <input name="" type="text">
            <input name="boton" type="button" value="enviar">
            
            </form></strong></p>
			
			</div>
		</div>
	</body>
</html>

script completo: http://www.mediafire.com/?6w13ck17j9940pj

caricatos · #7 (**permalink**) 07/09/2012, 19:32

Hola:

Para abrir un popup no son necesarias las librerías... busca en las FAQs del foro javascript y encontrarás la solución... También puedes recurrir a maestros del web: Formularios y enlaces dirigidos a ventanas...

Saludos

batalaior · #8 (**permalink**) 26/06/2014, 07:44

Cita:

Iniciado por flashmax

No se si te entendí bien quieres hacer algo asi:
[url]http://www.jacklmoore.com/colorbox/example1/[/url]

me podrias pasar el codigo del apartado del Slideshow (podria poner 5 fotos)

flashmax · #9 (**permalink**) 26/06/2014, 11:39

Cita:

Iniciado por batalaior

me podrias pasar el codigo del apartado del Slideshow (podria poner 5 fotos)

Código HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>Colorbox Examples</title>
		<style>
			body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
			h2{font-size:13px; margin:15px 0 0 0;}
		</style>
		<link rel="stylesheet" href="colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="../jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the Colorbox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
				$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});

				$('.non-retina').colorbox({rel:'group5', transition:'none'})
				$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>
	</head>
	<body>
		<h1>Colorbox Demonstration</h1>
		<h2>Elastic Transition</h2>
		<p><a class="group1" href="http://www.forosdelweb.com/f4/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
		<p><a class="group1" href="http://www.forosdelweb.com/f4/content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
		<p><a class="group1" href="http://www.forosdelweb.com/f4/content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
		
	</body>
</html>

CAMBIANDO EL CLASS CAMBIAS LA FUNCION <a class="group1"

para cada foto agregas una linea nueva

ejemplo:
<a class="group1" href="http://www.forosdelweb.com/f4/content/foto1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a>

<a class="group1" href="http://www.forosdelweb.com/f4/content/foto2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a>

<a class="group1" href="http://www.forosdelweb.com/f4/content/foto3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a>

<a class="group1" href="http://www.forosdelweb.com/f4/content/foto4.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a>

<a class="group1" href="http://www.forosdelweb.com/f4/content/foto5.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a>

batalaior · #10 (**permalink**) 30/06/2014, 07:33

una ultima pregunta se podrian poner las 5 fotosteniendo solo una linea
<a class="group1" href="http://www.forosdelweb.com/f4/content/foto1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a>

flashmax · #11 (**permalink**) 30/06/2014, 11:12

Cita:

Iniciado por batalaior

una ultima pregunta se podrian poner las 5 fotosteniendo solo una linea
<a class="group1" href="http://www.forosdelweb.com/f4/content/foto1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a>

si trabajas con php sí sino no!

batalaior · #12 (**permalink**) 01/07/2014, 06:45

como lo podria hacer