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

Question

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?

This might be off topic, but do you need this for debugging or something else? If you're looking for debugging purposes, have you tried Firebug? — gurun8, May 14 '10 at 19:07

karim79 · Answer 1 · 2010-05-14T21:11:21.533

4

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.

edited May 14 '10 at 21:11

answered May 14 '10 at 19:13

karim79

339,989
67
413
406

yes, clone was my first though, but the problem is that Clone() doesn't copy parent's style. Example:http://jsfiddle.net/rvbmh/ – grega g May 14 '10 at 19:56
@grega g: Why are you using in-line styles? – Mottie May 14 '10 at 20:35
no reason, its the same if I move style to css 'file': http://jsfiddle.net/Nda55/ – grega g May 14 '10 at 20:46
Yeah, but the CSS in a file or defined inside of style tags would apply to the dialog content. @karim79: Nice demo, but you could add some UI styling hosted by google to make the dialog window more visible ;) http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css – Mottie May 14 '10 at 20:52
This takes care of first level parent, but i would need it for arbitrary DOM. How about getting 'calculated' values of width, height, font-size,... from original element and setting them on clone. And doing this recursively for all sub-elements. Or maybe jquery.extend() function would do the trick. – grega g May 14 '10 at 21:30

score 0 · Accepted Answer · edited May 23 '17 at 12:13

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.

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

2 Answers2