Независимый CSS для Fancybox

ProgramBox

Независимый CSS для Fancybox

Post author:admin
Запись опубликована:1 февраля, 2023
Post category:Вопросы по программированию

#css #fancybox

Вопрос:

У меня есть страница, с которой я вызываю fancybox, которая содержит некоторый html-шаблон (что-то вроде шаблона электронной почты). Проблема в том, что весь CSS с главной страницы влияет на содержимое в fancybox и наоборот. Я хотел бы как-то изолировать их, чтобы их CSSS не влияли друг на друга.

Пример: у меня есть фоновое изображение, установленное для h3 для главной страницы. Кроме того, в fancybox у меня есть элемент h3, которому не присвоен CSS, но он использует стиль с главной страницы и получает то же фоновое изображение (чего не должно быть).

Возможно ли это как-то?

1. У вас есть пример? Не могли бы вы разделить свой CSS так, чтобы html, используемый в fancy box, был помещен только в этот HTML-файл, в то время как CSS для главной страницы был помещен только в содержащий файл?

2. Дело в том, что для главной страницы я извлекаю CSS из файла, который содержит стили для всего сайта. С другой стороны, весь контент fancybox (html плюс CSS) извлекается из базы данных. Я думаю, это усложняет ситуацию…

3. Разве использование опции IFrame не устраняет эту проблему?

4. Да, и это именно то, что я сейчас пытаюсь сделать … 🙂

Ответ №1:

Вы можете разделить свой CSS на несколько файлов, добавляя только то, что вам нужно для каждого html. Если вы не можете этого сделать, вы можете предоставить телу определенный #id для вашего шаблона, который загружается в fancybox.

 <body id="fancy_content">

а затем адаптируйте свои стили для этого шаблона

 body#fancy_content h3 {
  color: green;
}

Вы все равно можете столкнуться с небольшим конфликтом стилей, если оставите его в одном файле, но это даст вам способ заставить его работать.

Ответ №2:

На самом деле у вас есть 3 варианта.

Запустите содержимое fancybox в режиме iframe, что означает, что содержимое должно быть на его собственной странице без основной таблицы стилей. Здесь вы можете сделать любой стиль, который вам нравится, или вообще ничего.
Сброс стилей в содержимом fancybox, хотя это может быть довольно утомительно в зависимости от количества затронутых элементов.
Поместите содержимое fancybox за пределы основного #wrapper div вашей страницы и сделайте так, чтобы все стили страницы наследовались от #wrapper . т.е. вместо h3 {...} использования #wrapper h3 {...}

1. Iframe кажется наиболее правдоподобным решением, я попробую и дам вам знать, как это происходит.

2. Это сделало свое дело 🙂 Мне не потребовалось много времени, чтобы изменить код (просто добавил класс «iframe» в ссылку fancybox), так что теперь я получаю желаемый эффект. Спасибо!

3. Еще одна вещь: теперь я не могу получить правильные размеры Fancybox, чтобы содержимое соответствовало ему. Размер Fancybox составляет около 500 пикселей (в то время как содержимое больше), и автоматическое масштабирование здесь не помогает … : (

4. PS Я думаю, что это как-то связано с тем фактом, что когда Fancybox проверяет размер содержимого, iframe все еще не загружен, и поэтому Fancybox не может отрегулировать его размер.

5. Fancybox не может определить размер элементов в iframe. Автоматическое изменение размера предназначено для ajax-запросов. Вам нужно указать размер iframe в настройках fancy box. Вы можете указать как ширину, так и высоту, вот документация: fancybox.net/api содержит

Ответ №3:

попробуйте добавить идентификаторы к своим html-элементам, затем используйте идентификаторы CSS

  h3#idname { color: #FF0000; }