Question

是否有人碰巧知道是否有一种简单的方法可以在一个页面上排列多个对话框？

e.g：

<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，如果这有帮助

使用$ .each循环遍历每个对话框允许访问元素的索引。然后可以将其用作计算的乘数。如果您希望稍微重叠它们并设置堆叠顺序

，也可以使用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]
    });

})

自动排列页面上的多个对话框

1 个答案: