jquery - dom manipulation

Question

I would like to show in dialog all elements with specific class. The dialog should hide the rest of the page. So for example:

On this SO page I want to show all elements with class="user-info". Those elements would be shown in dialog with same width and height and same css and everything else would be hidden. It would be like cutting them out of the page and pasting them in a dialog.

Any ideas how this could be done?

Answer 1

I would like to show in dialog all elements with specific class.

So clone those elements, e.g.:

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

The dialog should hide the rest of the page.

Either set the overlay graphic (which you can do using themeroller) to something opaque, or attach some code to the open and close events:

$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 here.

EDIT: This demo keeps the inline style defined in a parent element.

Answer 2

Found an answer thanks to this post

Check it out here. It demonstrates pulling all elements of certain class from iframe and than appending them to main document and copying their style. Problem is that its very slow, especially if we copy many elements with a lot of child elements. If anyone knows a way to improve performance let me know (post here:)).

note: The reason I loaded jsFiddle page in iframe is that it(browser?) won't let jquery inspect content of iframe that's not loaded from same domain.