每次单击选项时都会打开一个新对话框

Question

每当用户点击列表中的选项时，如何打开新对话框。

Answer 1

$(".yourClass li").click(function(){
     $(this).dialog();
 }

Answer 2

你说一个“新”对话框？

然后你需要销毁当前的对话框，然后重新创建它。

$("li").click(function(){
    $(this).dialog(optionsToCreate); //create the dialog on click with your options
    $(this).dialog("open"); //then open it
});

然后我们将在关闭时销毁对话框。

$("li").bind("dialogclose", function(event, ui){
    $(this).dialog("destroy");
});

编辑您的评论...

为每个选项创建对话框 把它放在你的页面加载......

$(function(){ //page load function
    $("li").dialog();
});

然后绑定到单击处理程序以打开对话框

$("li").dialog("open");

需要查看一些代码才能看到HTML的样子，或者您需要修改问题以包含一些细节。但打开对话框非常简单，默认选项允许“堆叠”，如果您希望它们在某个布局中可见，则可能必须使用位置选项。

Answer 3

如果您只想每次创建一个新对话框，可以执行以下操作：

$('li').click( function() {
    // attach a dialog for each list item
    if(!$(this).data('dialog')) {
        var dialog = $('<div>').html($(this).html()).dialog({ autoOpen:false });
        $(this).data('dialog', dialog);
    }

    // open the attached dialog for that item
    $(this).data('dialog').dialog('open');
});

示例：http://jsfiddle.net/william/5pwVN/2/

修改：

您可以使用相同的设置缓存设置并每次打开另一个对话框：

var dialogSettings = {
    draggable: true,
    modal: false,
    title: 'Chat Area',
    buttons: {
        "Add": function() {
            $('#add-to-chat').dialog('open');
        },
        "Send File": function() {
            $('#send-file').dialog('open');
        },
        "End": function() {
            $(this).dialog('close');
        }
    }
};

$('.roster-contact').live('click', function () {
    $('<div>').html('some chats').dialog(dialogSettings);
});

示例：http://jsfiddle.net/william/5pwVN/3/