Question

Would anyone happen to know if there is a simple method to arrange multiple dialog boxes on a single page?

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

I want to have, say 6 or so dialog boxes but would like them to just arrange in a grid.

Answer 1

I can give you the conceptual code showing how to manage left position for now. You can add some more logic, and calcs based on window dimensions to make it more robust.

EDIT: BTW…dialogs all get appended to body on creation, so you can set all the divs in markup just before end of body tag if that helps

Using $.each to loop over each of the dialogs allows access to index of the element. Can then use that as a multiplier for calcs. You can also use ZIndex option if you prefer to overlap them a bit and set the stacking order

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

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

})