同一頁面內的多個對話框

要求是點擊按鈕時顯示對話框。我使用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

同一頁面內的多個對話框

回答

相關問題