jquery ui dialog und constraints / containment

[Baba]

Help, please...

Ich benutze einen dialog von jquery-ui. Diesen möchte ich als modal dialog haben. Allerdings nur in einem bestimmten Container div. Dieser Container enthält eine Flashmap, die mittels js reingeladen wird. Ursprünglich sieht es so aus:

<div style="width:600px; height:390px; position:relative;" id="flashcontent">You need to upgrade your Flash Player.</div>

(Ich kann den Dialog also nicht von vornherein da reinsetzen.)

Nun möchte ich, dass das Abblenden des Hintergrunds (modal dialog) nur in diesem div geschieht und sich der Dialog außerdem nur in diesem Div verschieben lässt.

Folgender Test steht schon für einen Teilerfolg: http://jsfiddle.net/DGKy6/1/, wobei das "containment" nach dem ersten Klick wirksam wird und noch der ganze viewport abgedunkelt wird. Den code verstehe ich ehrlich gesagt nicht ganz, und ich stelle mir vor, dass es noch einfacher geht.

Vielen Dank für Hilfe.

Cheers,
Baba

[suit]

Eine ganz dreckige Lösung: binde den Flash-Player als iframe ein (und dort ein HTML-Dokument, welches nur den Flashplayer im Vollbild läd (so wie das z.B. auch Youtube macht) - dort kannst du dann einen modalen Dialog drüberschießen ohne Scherereien.

Aber zurück zur eigentlichen Geschichte:

Führe einfach folgendes nach dem erzeugen des Dialogs aus:

d.dialog({
     position: [x,y]
});

x entspricht dabei die breite des containments abzüglich der breite des dialogs geteilt durch 2 (klammern nicht vergessen) + das offset des containments von links.

Das containment für das draggable hast du ohnehin schon richtig gesetzt - fehlt dir also nur noch das abdunkeln.

Hier musst du nach erzeugen des dialogs dann .ui-widget-overlay die größe des containments geben und die position (top/left) auch entsprechend anpassen.

Die Werte bekommst du mit .width(), .height() sowie .offset().left und .offset().top

[Baba]

Wow. Vielen Dank. Ich werde es heute versuchen umzusetzen (konnte mich damit leider nicht früher beschäftigen).

Cheers,
Baba

[Baba]

Dank Deiner Hilfe konnte ich es soweit bringen: Neues jsFiddle.
Nur ein Problem besteht noch: sobald ich den Dialog verschiebe wird Weite und Höhe des overlays wieder zurückgesetzt auf Viewportgröße. Woran liegt das?

Cheers,
Baba

[Baba]

Juhuuuuuuu.

Cheers,
Baba

[suit]

Juhuuuuuuu.

Geht doch, wenn Ingrid macht das schon :p