jquery - manipulation dom

Question

Je voudrais montrer dans tous les éléments de dialogue avec classe spécifique. La boîte de dialogue doit masquer le reste de la page. Ainsi, par exemple:

Sur cette page SO Je veux montrer tous les éléments avec class = "-info utilisateur" . Ces éléments seraient présentés dans le dialogue avec la même largeur et la hauteur et même css et tout le reste serait caché. Ce serait comme les découper de la page et les coller dans une boîte de dialogue.

Toute idée comment cela pourrait se faire?

Answer 1

trouvé une réponse grâce à cette après

Check it out . Il démontre en tirant tous les éléments de la classe de certains iframe et que les annexant au document principal et la copie de leur style. Le problème est que son très lent, surtout si l'on copie de nombreux éléments avec beaucoup d'éléments enfants. Si quelqu'un connaît un moyen d'améliorer les performances faites-moi savoir (post ici:).)

Note: (navigateur). La raison pour laquelle je charge la page jsFiddle en iframe est qu'il ne laissera pas jquery inspecter le contenu des iframe qui n'est pas chargé de même domaine

Answer 2

  

Je voudrais montrer dans toute boîte de dialogue   éléments avec classe spécifique.

clone ces éléments, par exemple:.

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

  

La boîte de dialogue doit masquer le reste du   page.

Soit définir le graphique d'incrustation (que vous pouvez faire en utilisant ThemeRoller ) à quelque chose d'opaque, ou attacher quelque code ouvert et noreferrer événements proches :

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

Preuve de concept ici.

EDIT: Cette démo conserve le style de ligne définie dans un élément parent

.