Учебный курс JQUERY UI Modal

Может ли кто-нибудь предоставить чистый пример того, как использовать диалог JQUERY UI Modal. Удивительно, но это не так просто, как вы думаете.

Цель:

щелчок элемента загружает модальный
Появится модальный вид, показывающий "Загрузка...", а затем делает вызов ajax для получения содержимого модального
Модаль можно закрыть, нажав кнопку close btn или нажав кнопку
Модаль может быть повторно закрыт, и когда он снова открывается, он не показывает состояние предыдущего модального взаимодействия.

Спасибо!

Вот что я сейчас делаю, но он работает очень неуклюжий и совсем не похоже на умное решение. Идеи?

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');
});

Ответ 1

Основная проблема, которую я вижу с вашим кодом, заключается в том, что вы не добавляете диалог в DOM, поэтому браузер не отображает его. Мое предложение состоит в том, что вы сначала попробуете:

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

Итак, вы добавили его в DOM, и браузер может отобразить его.

Ответ 2

Почему так сложно?

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

Вы можете связать его uo в jquery. А в HTML просто есть пустой div с id sharerdialog. Пусть стиль будет скрыт

style="display: none;"

Но это он