[SOLVED] Take all elements matching a selector, put them in a dialog, hide everything else on the page

Take all elements matching a selector, put them in a dialog, hide everything else on the page

In a dialog, I would like to show all elements with a specific class. The dialog should hide the rest of the page.

So for example: On this Stack Overflow page, I want to show all elements with class="user-info". Those elements would be shown in a dialog with the same width and height and the 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?

Solution

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.