jQuery-dom манипуляции

Question

Я хотел бы показать в диалоговом окне все элементы с определенным классом. Диалог должен скрывать остальную часть страницы. Так, например:

На этой странице SO я хочу показать все элементы с помощью class = "user-info". Эти элементы будут показаны в диалоговом окне с одинаковой шириной и высотой и одинаковыми css, и все остальное будет скрыто. Это было бы похоже на то, чтобы вырезать их из страницы и вставить их в диалог.

Любые идеи, как это можно сделать?

Answer 1

Обнаружили ответ post

Проверьте пожалуйста here. Он демонстрирует вытягивание всех элементов определенного класса из iframe и добавление их в основной документ и копирование их стиля. Проблема в том, что он очень медленный, особенно если мы скопируем много элементов с большим количеством дочерних элементов. Если кто-нибудь знает способ улучшить производительность, дайте мне знать (сообщение здесь :)).

примечание: причина, по которой я загрузил страницу jsFiddle в iframe, заключается в том, что она (браузер?) Не позволит jquery проверять содержимое iframe, которое не загружается из того же домена.

Answer 2

Я хотел бы показать в диалоге все элементы со специальным классом.

Так clone эти элементы, например .:

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

Диалог должен скрыть остальную часть страницы.

Либо установить наложения графики (которые вы можете сделать с помощью themeroller) к чему-то непрозрачным, или прикрепить некоторый код к open и close событий:

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