JQuery UI Dialog - отличается от стиля, который вызывает диалог

Question

У меня есть файл main.htm со своими ссылками на css.Я хочу открыть диалоговое окно jQuery UI, когда пользователь нажимает кнопку на main.htm.Существует файл .js (указанный в main.htm), который обрабатывает этот процесс.У меня вопрос: как я могу иметь диалог со стилем пользовательского интерфейса jQuery, но без добавления какого-либо файла CSS в main.htm?Спасибо.

Answer 1

Я не совсем уверен, чего вы пытаетесь достичь. Это может помочь объяснить вашу цель. Вам понадобится немного CSS, так или иначе, чтобы достичь стиля. Кажется, вы нашли лучший способ динамически внедрить этот стиль в ваш документ - верно?

1. Если вы вообще используете пользовательский интерфейс jQuery, то вы должны включить файл jQuery ui css в любой HTML-документ, который вы используете. Если по какой-либо причине он недоступен при нажатии кнопки (например, вы пытаетесь уменьшить количество запросов ...), вы можете программно добавить <link rel="href" type="stylesheet" href="..." /> с помощью jQuery через jQuery('head').append('<link>',{ ...attrs ... });

2. Если у вас уже есть пользовательский интерфейс jQuery, но вы хотите, чтобы конкретное диалоговое окно имело стиль, отличный от остальных ваших диалогов, пользовательский интерфейс jQuery имеет встроенное средство для этого в Themeroller через параметр контекста CSS (доступный в расширенные настройки темы на пользовательском интерфейсе jQuery страница загрузки )

---

Я заметил, что вы обеспокоены изменением main.html - возможно, из-за того, что вы не хотите, чтобы стили пользовательского интерфейса jQuery влияли на остальную часть вашего сайта. С вами должно быть все в порядке: таблицы стилей пользовательского интерфейса jQuery чрезвычайно специфичны, они не собираются вносить глобальные изменения в стили на вашем сайте, то есть затрагивать основной шрифт.

Кроме того, вы можете предотвратить любые конфликты (которые могут возникнуть, только если main.html начнет использовать свой собственный пользовательский интерфейс jQuery), используя дополнительное пространство имен во время экспорта themeroller. Если конфликты являются вашей основной задачей и причиной, по которой вы не добавляете файл main.html ,

Использование IFRAME будет иметь свои проблемы: например, ограничение перетаскивания ui dialog в пределах iframe - потенциально делает его бесполезным. Вы могли бы иметь возможность взломать что-то, где iframe, в котором находится ui dialog, абсолютно переставлен, когда вы перемещаете диалог внутрь.

Вам лучше оспаривать ограничение на изменение main.html, чем обходить его хаком. Может быть, компромисс между, возможно, в голубой луне, нарушением стиля клиентов и просто по-настоящему всплывающим диалоговым окном jQuery ui, танцующим в абсолютно позиционированном iframe, не стоит ИМО.

Answer 2

Использование iFrame может помочь вашей проблеме.

Вот пример создания iFrame с использованием jQuery.

var newDialog = $("<iframe>", {
  src: "myIframe.html"
});

$("#yourDiv").append(newDialog);