jQuery UI modal Tutorial

Question

Puede alguien dar un ejemplo limpio de cómo utilizar la interfaz de usuario de diálogo modal de jQuery. Sorprendentemente, no es tan simple como crees.

Objetivo:

1. clic en un elemento de carga un modal

2. El modal aparece mostrando "Cargando ..." y luego hace una llamada AJAX para obtener el contenido de la modal

3. El modal se puede cerrar haciendo clic en cerrar btn o presionando escape

4. El modal se puede volver a abrir, y cuando se vuelve a abrir, no muestra el estado de la interacción modal anterior.

Gracias!

Aquí es lo que estoy haciendo actualmente, pero funciona muy torpe y no parece en absoluto como una solución inteligente. 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'); 
}); 

Answer 1

El principal problema que veo con su código, es que no se está agregando el diálogo para el DOM, por lo tanto, el navegador lo muestra. Mi sugerencia es que primero intentes:

var $dialog = $('<div id="sharedialog"></div>') 
     .html('<p>Loading....</p>') 
     .appendTo('body') 
     .dialog({...}); 

Para que lo hayas agregado al DOM y el navegador pueda mostrarlo.

Answer 2

¿Por qué tan compleja?

$(function() { 
    $("#itemshare").click(function() { 
     $("#sharerdialog").dialog().load("/items/ajax/share/index_beta.cfm"); 
     return false; 
    }); 
    }); 

se pueden encadenar que uo en jQuery. Y en el HTML solo tiene un div vacío con el ID sharerdialog. Puede diseñarlo oculta

style="display: none;" 

Pero eso es todo