Autore: Fabio Di Matteo
Ultima revisione: 21/07/2012

Sono molto comodi i Dialog di jquery ui, ma a mio avviso manca ancora la possibilita' di crearli a runtime con una semplice funzione. Ecco quindi di seguito il codice che puo' fare al caso nostro

<a href="javascript:InfoDialog('Mio titolo', 'mio testo');" >Apri dialogo</a>

o piu' semplicemente in una parte qualsiasi del codice javascript in questo modo:

InfoDialog('Mio titolo', 'mio testo');

//Contatori dei dailog aperti
var InfoDialogID=0;
 
function InfoDialog(title, text)
{
	// Contatore dei dialog aperti ci servira per rendere univoco l'id
	// di ogni dialog
	InfoDialogID++ ;
 
	//Aggiungiamo il div che conterra il nostro dialog al body
	$('body').append('<div id="InfoDialog'+InfoDialogID+'" style="font-size: 12px; padding:30px;">'+text+'</div>');
 
	//Il dialog
	$( "#InfoDialog"+InfoDialogID).dialog({autoOpen:false},
					{ height: 200 },{width: 350},
					{ dialogClass: "alert" }, 
					{ title: title },
					{show: "fade"},
					{hide: "explode"},
					{buttons: {	'Okay, va bene': function() {	$( this ).dialog( "close" );}}}
					);
 
 
	//lo mostro
	$( "#InfoDialog"+InfoDialogID ).dialog( "open" );
}

Nel mio caso ho preferito mettere il codice della funzione in un file a parte e poi l'ho incluso nella pagina che lo utilizza nel modo convenzionale.