I output a json array which has labels for a 'Name' and a 'Definition'. A user is presented with a list of radio buttons. When a user clicks a radio button which has the following structure:

1. <input type="radio" value="23" name="statistic" id="stat-23" />

I take the value of the radio button and use this to identify which 'Name' 'Definition' pair I am referring to from my json array.

I then use the 'Name' 'Definition' pair to populate a div which typically updates dynamically. To accomplish this I use the following code:

2. $('input[type=radio]').live( 'change', function(){
3.       if ( ! $(this).is(':checked') )
4.         return false;
5.       var stat_id = $(this).attr( 'id' ).replace( /stat-/, '' );
6.       refreshDefinition( stat_id );
7.       } );
8. 
   
9.   function refreshDefinition( stat_id ) {
10.       var definition = definitions[ stat_id ];
11.       var div = $("<div id='definition'>"+definition.name+": "+definition.definition+"</div>");
12.       $('#definition').replaceWith( div );
13.       }

This works fine without a dialog (it updates just fine as is), however, it would look a lot better if there were some way to incorporate a dialog so that when a user clicks a button, the dialog will appear and they can see the 'Name' 'Definition' pair and then can exit out of it when they are satisfied.

If you have any guidance on how I could go about solving this problem or any alternative approaches, I would really appreciate it!

Thanks.