jQuery ui Problemen

Hallo,

Ik heb op deze pagina een Dialog ik wil graag 6 van deze vensters hoe kan ik dit het handigst doen?
http://letsweb.nl/systemen/overzicht/
Verder wil ik ze ook links onder elkaar.
M.v.g. Wouer

$(function() {
$( "#dialog" ).dialog();
$( "#dialog2" ).dialog();
$( "#dialog3" ).dialog();
$( "#dialog4" ).dialog();
$( "#dialog5" ).dialog();
$( "#dialog6" ).dialog();
    });

En telkens een andere ID meegeven?

Zes dezelfde styleproperties?

Nee toch?

Nee ik bedoel dat ze onder elkaar komen.

Zoiets zou toch met 1 set properties kunnen zodat je geen oplopende nummering in je ids hebt?

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

+ nog wat code:

$.widget("ui.dialog", {
    options: {
        autoOpen: true,
        buttons: {},
        closeOnEscape: true,
        closeText: close,
        dialogClass: ,
        draggable: true,
        hide: null,
        height: auto,
        maxHeight: false,
        maxWidth: false,
        minHeight: 150,
        minWidth: 150,
        modal: false,
        position: {
            my: left,
            at: left,
            collision: fit,
            // ensure that the titlebar is never outside the document
            using: function(pos) {
                var topOffset = $(this).css(pos).offset().top;
                if (topOffset < 0) {
                    $(this).css(top, pos.top - topOffset);
                }
            }
        }

DRINGEND NODIG ?!?!

Kan je een voorbeel dgeven wat je zoekt? Ik kan uit je topic namelijk niet opmaken wat je wilt.

De dialog links boven en daar onder nog 2.

toevoeging op 10 mei 2012, 12:52:56:
niemand?!?!?!?! Veel punten als het je lukt ?!

toevoeging op 10 mei 2012, 12:53:42:
niemand?!?!?!?! Veel punten als het je lukt ?!

Wie kan dit ?!?!

Kijk eens naar JGrowl, heb je daar wat aan?

Ik bedoel die dialogs moeten als je de pagina bezoekt linksboven zijn

Kan iemand alsjeblieft helpen ik ben bereid veel te betalen !?

Wouterp schreef:

Ik bedoel die dialogs moeten als je de pagina bezoekt linksboven zijn

Dus, dan kijk je niet even in de opties van jGrowl?

$.jGrowl("Wazaaa", { position:top-left });

En done....

Ook de JqueryUI dialog heeft een position-optie.