Javascript 同一页面中的多个对话框

要求是在点击按钮时显示对话框。我已经使用jQueryUI创建了对话框。请在这里找到代码。 问题是我有一个创建对话框的功能，如何在同一页面中显示多个对话框，每个对话框显示不同的数据， 当我点击dialog2按钮时，我需要显示一个有文本区和提交按钮的对话框。请建议。 下面是示例代码：

$(function() {
    $("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            width:"750",
            height:300,
            modal: true,
            buttons: {
                "Close": function() {
                    $(this).dialog("close");
                }
            }
        });

    });

---

你可以走几条路。由于您对对话框内容的需求非常具体（textarea控件-第一个对话框弹出第二个对话框-等等），因此我会在页面上硬编码所需的div。因此，制作一个“#textAreaDialog”div并将所需的控件放入其中，并将其样式设置为display:none

接下来，修改您的函数以接受参数（应该弹出的div的名称，单击“OK”时要执行的函数，单击“Cancel”时要执行的函数），这样您就不局限于对所有的modals使用#dialog，您可以很好地控制单击每个按钮时发生的情况（不一定只是关闭对话框。然后，为所需按钮的单击事件设置事件处理程序，并相应地调用对话框

html:

Javascript事件处理程序：

    $("#btnPopFirstModal").click(function(e){
        e.preventDefault();
        PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed
        return false;
    });

请记住，您可以根据需要对此进行扩展，添加更多事件处理程序和自定义div以用于更定制的模态。此外，正如您所看到的，您可以在调用PopDialog函数时内联编写“确定”和“取消”函数，也可以向其传递函数名（如果要重用该函数，则最好使用此函数）.

我是这样做的：

$(
    //when JQuery is ready
    funciton()
    {
        $('#SomeButton').on
        (
            'click', 
            function()
            {
                //Note that content could be anything (HTML, text...)
                //This dynamicly create a div to be your dialog
                $('<div>').append(content).dialog
                (
                    {
                        //autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now
                        resizable: true,
                        //I remove the double quotes here because height didn't have any but maybe it was the other way around
                        width:750,
                        height:300,
                        //I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals.
                        modal: false,
                        buttons: 
                        {
                            Close: function() 
                            {
                                $(this).dialog("close");
                            }
                        },
                        //this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup.
                        close:
                        function()
                        {
                            $(this).dialog('destroy').remove();
                        }
                     }
                );
            }
        );
    }
);

$(
//当JQuery准备就绪时
函数（）
{
$（'SomeButton'）。在
(
“点击”，
函数（）
{
//请注意，内容可以是任何内容（HTML、文本…）
//这将动态创建一个div作为对话框
$（''）.append（content.dialog
(
{
//自动打开：错，我把它拿走了。如果你需要的话，你可以把它放回去，但我认为现在它并不重要
可调整大小：正确，
//我删除了这里的双引号，因为高度没有任何限制，但可能是另一种情况
宽度：750，
身高：300，
//我将其设置为false，因为如果需要同时显示两个或多个对话框，则不能将它们设置为modals。
莫代尔：错，
按钮：
{
关闭：函数（）
{
$（此）.dialog（“关闭”）；
}
},
//这一点很重要，当您关闭“动态创建”对话框时，它会销毁并删除该对话框，这样您就不会在html标记中不显示该对话框。
关闭：
函数（）
{
$（this.dialog（'destroy'）.remove（）；
}
}
);
}
);
}
);

    $("#btnPopFirstModal").click(function(e){
        e.preventDefault();
        PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed
        return false;
    });

$(
    //when JQuery is ready
    funciton()
    {
        $('#SomeButton').on
        (
            'click', 
            function()
            {
                //Note that content could be anything (HTML, text...)
                //This dynamicly create a div to be your dialog
                $('<div>').append(content).dialog
                (
                    {
                        //autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now
                        resizable: true,
                        //I remove the double quotes here because height didn't have any but maybe it was the other way around
                        width:750,
                        height:300,
                        //I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals.
                        modal: false,
                        buttons: 
                        {
                            Close: function() 
                            {
                                $(this).dialog("close");
                            }
                        },
                        //this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup.
                        close:
                        function()
                        {
                            $(this).dialog('destroy').remove();
                        }
                     }
                );
            }
        );
    }
);