javascript - 同一页面内的多个对话框

Question

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

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

    });

Answer 1

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

接下来，修改您的函数以接受参数(应弹出的 div 的名称、单击“确定”时要执行的函数 - 以及单击“取消”时要执行的函数)，这样您就可以不限于对所有模态使用 #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 函数时内联编写“确定”和“取消”函数 - 或者您可以向它传递一个函数名称(如果您要重用该函数，这是更好的选择)。