在頁面上自動排列多個對話框

Question

是否有人想知道是否有簡單的方法在單個頁面上排列多個對話框？

例如爲：

<div id="div_adduser" class="useradmin_dialogs"> 
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1"> 
    <tr> 
     <td><strong>Add System User</strong></td> 
    </tr> 
</table> 
<div> 
    <div id="div_chpw" class="useradmin_dialogs"> 
     <table width="100%" border="0" align="center" cellpadding="3" cellspacing="1"> 
      <tr> 
       <td><strong>Change Password</strong></td> 
      </tr> 
     </table> 
    </div> 

// Set Dialog boxes 
$(function() { 
    $(".useradmin_dialogs").dialog({ 
     width: 460, 
     autoOpen: false, 
    }); 
    $(".ui-dialog-titlebar-close").remove(); 
}); 

我想有，說6個左右的對話框，但想他們只是在一個網格安排。

Answer 1

我可以給你顯示如何現在管理左側位置的概念代碼。您可以添加更多邏輯，並根據窗口尺寸進行計算，以使其更加健壯。

編輯：BTW ...對話都得到追加到身體上的創造，所以只要身體標記結束前設置標記所有的div如果在每個有助於

使用$。每次循環該對話框允許訪問元素的索引。然後可以使用它作爲calcs的乘數。您也可以使用ZIndex選項，如果您喜歡將它們重疊一點並設置堆疊順序

$(".useradmin_dialogs").each(function(index){ 
    var dialogW=460 ;    
    var posX= index *dialogW; 
    var posY= 100; 

    $(this).dialog({ 
     width: dialogW, 
     autoOpen: false, 
     position: [ posX, posY] 
    }); 

})