Question

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

目标：

点击元素会加载模态
模式显示“正在加载...”然后进行ajax调用以获取模态的内容
点击关闭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');
});

Answer 1

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

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

因此您将其添加到DOM中，浏览器可以显示它。

Answer 2

为什么这么复杂？

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

你可以在jquery中链接它。并且在HTML中只有一个带有id共享对话框的空div。可以隐藏它的风格

style="display: none;"

但就是这样

JQUERY UI模态教程

2 个答案: