Samouczek modułu JQuery UI

Question

Czy każdy może podać czysty przykład użycia okna dialogowego Modul interfejsu użytkownika JQuery. Zaskakujące, że nie jest tak proste, jak mogłoby się wydawać.

Cel:

1. kliknięcie elementu ładuje modalne

2. Modalny pojawia pokazując "Loading ..." A potem robi wywołanie ajax, aby uzyskać zawartość modalnym

3. Modal można zamknąć, klikając przycisk zamknij btn lub naciskając klawisz escape

4. Modal można ponownie otworzyć, i po ponownym otwarciu nie pokazuje stanu poprzedniej interakcji modalnej.

Dzięki!

Oto, co obecnie robię, ale działa bardzo niezdarnie i nie wydaje się jak inteligentne rozwiązanie. Pomysły?

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

Główny problem widzę w kodzie, jest to, że nie dodajemy okno do DOM, zatem przeglądarka nie będzie go wyświetlić. Moja sugestia jest taka, że ​​najpierw spróbujesz:

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

Dodałeś go do DOM i przeglądarka może go wyświetlić.

Answer 2

Dlaczego tak skomplikowane?

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

Możesz połączyć je w jquery. A w HTML wystarczy pusty div z id sharerdialog. Może to styl ukryty

style="display: none;" 

Ale to wszystko