UI Dialog con iframe

Usando la libreria de jQuery y jQuery UI vamos a ver como podemos mostrar contenido en el widget Dialog mediante el uso de un iframe. Para este ejemplo el contenido a mostrar lo obtendremos de un archivo html.


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Dialog</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$.fx.speeds._default = 1000;
				
				// iframe que vamos a cargar en el UI Dialog
				var iframe = $('<iframe src="contenido.html"  />');
					
				// UI Dialog
				iframe.dialog({
					autoOpen: false,
					modal: true,
					show: "blind",
					title: "UI Dialog",
					resizable: false,
					width: 300,
					height: 190,
					hide: "explode",
				});
				
				$('#openDialog').click(function() {
					iframe.dialog('open');
					return false;
				});
			});
		</script>

		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
		</style>	
	</head>
	<body >
		<input type="button" id="openDialog" value="UI Dialog">
	</body>
</html>

El contenido que mostramos lo traemos del archivo llamado contenido.html, la documentación completa para los widget Dialog la puedes encontrar en la página oficial del proyecto ( consultar aqui ), te recomiendo que le des un vistazo y revises los ejemplos que se incluyen.

Acerca de Moycas
Developer Web @moycc

5 Responses to UI Dialog con iframe

  1. Pingback: Latino » Blog Archive » UI Dialog con iframe

  2. Jean dice:

    ¿cómo se podria cerar desde adentro del iframe?

  3. Ricaurte dice:

    Como puedo colocar el dialog en un correo electronico para envio masivo. que donde se deposite el email se pueda ver el cuadro de dialogo.

    Gracias

  4. arturo dice:

    marca error exactamente en esta linea
    iframe.dialog({

    Uncaught TypeError: Object [object Object] has no method ‘dialog’

    me pueden ayudar?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: