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.
Me gusta:
Me gusta Cargando...