jquery - dom Manipulation

Question

Ich möchte in Dialog alle Elemente mit bestimmten Klasse zeigen. Der Dialog sollte den Rest der Seite auszublenden. So zum Beispiel:

Auf dieser Seite SO ich mit allen Elementen zeigen will class = "Benutzer-Info" . Diese Elemente würden im Dialog mit gleicher Breite und Höhe und die gleiche CSS und alles andere ausgeblendet werden würde angezeigt. Es wäre wie sich aus der Seite schneiden und in einem Dialog einfügen.

Alle Ideen, wie dies geschehen könnte?

Answer 1

Gefunden eine Antwort durch diese post

Überprüfen Sie es heraus hier . Es zeigt alle Elemente der bestimmten Klasse von iframe ziehen und als sie zu Hauptdokument angehängt und kopieren ihren Stil. Das Problem ist, dass seine sehr langsam, vor allem, wenn wir viele Elemente mit vielen Kindelementen kopieren. Wenn jemand weiß, einen Weg zur Verbesserung der Leistung lassen Sie mich wissen (post hier:)).

Anmerkung: (Browser). Der Grund, warum ich jsFiddle Seite in Iframe geladen ist, dass es nicht Inhalt der iframe jquery untersuchen lassen, die nicht aus derselben Domäne geladen wird

Answer 2

  

Ich möchte im Dialog alle zeigen   Elemente mit bestimmten Klasse.

So Klon jene Elemente, z.

var $div = $("<div />").append($(".fooClass").clone()).dialog();

  

Der Dialog sollte den Rest der verstecken   Seite.

gesetzt Entweder das Overlay Grafik (die Sie tun können, mit Themeroller) zu etwas undurchsichtig, oder befestigen einige Code zum offen und close Ereignisse:

$div.dialog({
   open: function(event, ui) { $("body").hide() } // that will hide everything, including the dialog, so watch out.
   close: function(event, ui) { $("body").show() }
});

Proof-of-Concept hier.

EDIT: Diese Demo hält den Inline-Stil in einem übergeordneten Elemente definiert

.