Question

要求是单击按钮时显示对话框。我使用jQuery UI创建了对话框。请在此处找到代码http://jsfiddle.net/M4QM6/32/。 ISsue是我有单一功能创建对话框，如何在同一页面中显示多个对话框，每个对话框显示不同的数据，当我点击dialog2按钮时，我需要显示一个对话框，其中包含textArea和一个提交按钮。请提示。以下是示例代码：

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

    });

Answer 1

你可以去几条路线。由于您对对话框内容的需求非常具体（textarea控件 - 第一个对话框弹出第二个对话框等），我会在页面上硬编码所需的div。所以，制作一个＆＃34;＃textAreaDialog＆＃34; div并在其中放置所需的控件ad将其样式设置为display：none。

接下来，修改你的函数以接受参数（应该弹出的div的名称，如果＆＃34执行要执行的功能;单击确定＆＃34;以及＆＃34;取消＆＃时要执行的功能） 34;被点击），所以你不仅限于使用#dialog进行所有模态，你可以精确控制每个按钮被点击时发生的事情（并不总是只是关闭对话框。然后，设置事件处理程序为单击所需按钮的事件，并相应地调用对话框。

HTML：

    <input type="button" id="btnPopFirstModal" Value="Open First Modal"/>

    <div id="divFirstModal" style="display:none;">
        Here is the content for the first modal
    </div>

    <div id="divSecondModal" style="display:none;">
        Here is the content for the second modal  
    </div>

Javascript函数：

    function PopDialog(divToPop, OkFunction, CancelFunction)
    {
        $("#" + divToPop).dialog({
                autoOpen: false,
                resizable: true,
                width:"750",
                height:300,
                modal: true,
                buttons: {
                    "Ok": function() {
                        OkFunction();
                        $(this).dialog("close");
                    },
                    "Cancel": function(){
                        CancelFunction();
                        $(this).dialog("close");
                    }
                }
            });

        });
    }

    function PopSecondModal(){
        PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here});
    }

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函数时内联写入OK和Cancel函数 - 或者您可以将函数名称传递给它（如果您要重用该函数，这是最好的。）

Answer 2

我是这样做的：

$(
    //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();
                        }
                     }
                );
            }
        );
    }
);

同一页面内的多个对话框

2 个答案: