同一页面内的多个对话框

要求是在单击按钮时显示对话框。我使用jQuery UI创建了对话框。 请在http://jsfiddle.net/M4QM6/32/找到代码。 ISsue是我有单一function创建对话框，如何在同一页面中显示多个对话框，每个对话框显示不同的数据，当我点击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。 所以，制作一个“#textAreaDialog”div并在其中放置所需的控件，将其样式设置为display：none。

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

HTML：

   
 Here is the content for the first modal 
 
 Here is the content for the second modal  

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