Steuerung der DOM-Position eines jquery UI-Dialogs

Question

Ich versuche, einen jQueryUI-Dialog zu erstellen und haben es selbst in das Dom innerhalb eines bestimmten Elements einfügen. Wir haben einen Content-Abschnitt, der die Muttergesellschaft einer Reihe von Stilen ist, so dass Elemente innerhalb des Dialogs nicht gestylt werden, da jqueryUI ein Anhängen an Körper tut. Gibt es eine Möglichkeit, jqueryUI zu sagen, an einen Selektor meiner Wahl anhängen?

Was es bewirkt

<section id="content">
</section>
<div class="dialog"> the dialog </div>

was ich will

<section id="content">
<div class="dialog"> the dialog </div>
</section>

Answer 1

Ich weiß, dass diese Frage schon etwas älter ist, aber ich wollte sicherstellen, dass alle Neuankömmlinge in die richtige Richtung geleitet werden. Die Option "appendTo" wurde in Version 1.10.0 hinzugefügt.

$( ".selector" ).dialog({ appendTo: "#someElem" });

Sie können darüber lesen aquí

Answer 2

En Benutzerdefinierter CSS-Bereich und jQuery UI-Dialogthemen

// Create the dialog, but don't open it yet
var d = $('#myDialogContents').dialog({
    autoOpen: false
    // other dialog options
});
// Take whole dialog and put it back into the custom scope
d.parent('.ui-dialog').appendTo('.myCustomScope');
// Open the dialog (if you want autoOpen)
d.dialog('open');

Answer 3

Dieser Link vielleicht von einigem Nutzen.
Aber das, was Sie erreichen möchten, scheint mir ein bisschen gegen das Modell der jQuery UI-Bibliothek zu sein. Sie können das Dialogfeld mit den CSS-Klassen gestalten, die auf der Registerkarte "Theme" unter diese Seite .
Wenn Sie die ID des Elements, das Sie zu einem Dialog machen wollen, in eine Klasse übertragen können, können Sie den folgenden Code verwenden

$( ".dialog" ).dialog({ dialogClass: 'content' });

und Sie sollten Ihr CSS aktualisieren, um die Änderung zu berücksichtigen. Damit Sie keine doppelten id-s einführen (was zu Problemen in der zukünftigen Arbeit führen kann und semantisch falsch ist), wenn Sie die #content Tag innerhalb des Dialoginhalts

Answer 4

Sie können jquery's anhängen. méthode.

$('#content').append('<div class="dialog"> the dialog </div>');