JQUERY UI 模态教程

Question

任何人都可以提供一个如何使用 JQUERY 的 UI 模态对话框的简洁示例。令人惊讶的是，事情并不像您想象的那么简单。

目标:

1. 单击元素会加载模式

2. 模态框显示“正在加载...”，然后进行 ajax 调用以获取模态框的内容

3. 可以通过单击关闭按钮或按转义键来关闭模式

4. 模态框可以重新打开，并且当重新打开时，它不会显示之前模态框交互的状态。

谢谢!

这是我目前正在做的事情，但它的工作方式非常笨拙，看起来根本不像一个聪明的解决方案。有想法吗？

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

我在您的代码中看到的主要问题是您没有将对话框添加到 DOM，因此浏览器不会显示它。我的建议是你首先尝试:

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

这样你就将它添加到了 DOM 中，浏览器就可以显示它了。