同一页面内的多个对话框

要求是点击按钮时显示对话框。我使用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"); 
       } 
      } 
     }); 

    });

来源

2014-09-25 user3684675

你可以去几条路线。由于您对对话内容的需求非常特定（textarea控制 - 第一个对话框弹出第二个对话框 - 等），我会在页面上硬编码所需的div。因此，制作一个“#textAreaDialog”div，并在其中放置所需的控件并将其样式设置为display：none。接下来，修改你的函数来接受参数（应该弹出的div的名称，单击“OK”时执行的函数）以及单击“Cancel”时执行的函数），因此，不仅限于为所有模式使用#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函数 - 或者你可以传递一个函数名（如果你想重用这个函数，这是最好的）。

来源

2014-09-25 19:54:18

这里是我做的事：

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

来源

2014-09-25 20:39:52 Sebastien

同一页面内的多个对话框

回答

相关问题