Can anyone provide a clean example of how to use JQUERY's UI Modal dialog. Surprisingly it's not as simple as you would think.

Goal:

  1. clicking an element loads a modal

  2. The modal appears showing "Loading..." And then makes an ajax call to get the contents of the modal

  3. The modal can be closed by clicking a close btn or by pressing escape

  4. The modal can be repopened, and when it's reopened it doesn't show the state of the previous modal interaction.

Thanks!

Here is what I currently am doing, but it works very clumsy and doesn't seem at all like a smart solution. Ideas?

var $dialog = $('<div id="sharerdialog"></div>')
.html('<p>Loading...</p>')
.dialog({
    autoOpen: false,
    title: 'Share the item',
    position: ['center',150],
    width: 450,
    focus:function(event, ui) {
        $('#dialogcloser').click(function() {
            $dialog.dialog('close');
        });
    }, 
    open: function(event, ui) {
        var title2use = document.title;
        title2use = escape(title2use);          
        $("#sharerdialog").load("/items/ajax/share/index_beta.cfm?itemid=#itemID#&itemtitle=" + title2use);
    }
});
// Bind the Share btn to Open the Modal
$('#itemshare').click(function() {
    $dialog.dialog('open');
});
Edit
Report