JQuery - Дом манипуляции

Question

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

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

Есть идеи, как это можно сделать?

Answer 1

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

Итак клон этих элементов, например ::100100

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() }
});

Подтверждение концепции здесь.

РЕДАКТИРОВАТЬ: Эта демонстрация сохраняет встроенный стиль, определенный в родительском элементе.

Answer 2

Нашел ответ благодаря этому сообщению

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

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