jQuery: caricare una pagina in una finestra di dialogo

Caricare una pagina in una finestra di dialogo con jQuery richiede l'uso dell'oggetto dialog() di jQuery UI combinato con il metodo load() di jQuery. Vediamo insieme i dettagli dell'implementazione.

Nella pagina principale definiamo il seguente codice HTML:

<p><a href="page.html" id="open" title="Pagina di test">Carica una pagina in una finestra di dialogo</a></p>

Nella pagina page.html usiamo invece la seguente marcatura:

<div id="content">
	<p>...</p>
</div>

Associamo quindi un'azione al link della pagina principale:

$(function() {

	$('#open').click(function(event) {
	
	    var $link = $(this);
	
		var $dialog = $('<div></div>')
				.load($link.attr('href') + ' #content')
				.dialog({
					autoOpen: false,
					title: $link.attr('title'),
					width: 600
		});
		
		$dialog.dialog('open');
	
		event.preventDefault();
	
	});

});

Creiamo prima un elemento e lo popoliamo con il metodo load() che andrà a reperire i contenuti della pagina di destinazione all'interno dell'elemento con ID content. Quindi creiamo una finestra di dialogo e la associamo a questo nuovo elemento, impedendole di aprirsi in automatico e impostando il suo titolo sul valore dell'attributo title del link. Infine, apriamo la finestra di dialogo usando il suo metodo open().

Potete visionare l'esempio finale in questa pagina.