Have Geek Brain

JQuery manipulation - dom

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

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

Any ideas how this can be done?

+2


a source to share


2 answers


Found the answer thanks to the post

Check it here . It demonstrates pulling all elements of a specific class from an iframe and adding them to the main document and copying their style. The problem is that it is very slow, especially if we are copying many elements with many children. If anyone knows a way to improve performance, let me know (post here :)).



note: The reason I loaded the jsFiddle page in the iframe is because it (browser?) will prevent jquery from validating iframe content that is not loading from the same domain.

0


a source


I want to show in a dialog all the elements with a specific class.

So clone these elements, for example:

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

The dialog should hide the rest of the pages.



Either set the overlay graphics (which you can do with themeroller ) to something opaque, or attach 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() }
});

A proof of concept is here.

EDIT: This demo keeps the inline styling defined in the parent.

+4


a source






More articles:


All Articles