Как я могу изменить цвет наложения в fancyBox v2

Question

В fancyBox версии 1 был параметр overlayColor, но в версии 2 он, похоже, больше не работает.

Редактирование CSS не работает, поскольку оно перезаписывается JavaScriptв плагине.

Есть идеи?

Answer 1

Параметр API Fancybox v2.x является новым и не совместим с предыдущими версиями, поэтому overlayColor был заменен параметром helpers => overlay => css => background-color.

Вам не нужно возиться с оригинальными (js или css) файлами, как это предложено @ Sparky672 (это плохая практика идея).Вы можете установить эту опцию в своем пользовательском скрипте ... поэтому, имея этот HTML-код, например:

<a class="fancybox" href="images/01.jpg">open fancybox with a red overlay</a>

используйте собственный скрипт, например:

$(".fancybox").fancybox({
  helpers : { 
   overlay: {
    opacity: 0.8, // or the opacity you want 
    css: {'background-color': '#ff0000'} // or your preferred hex color value
   } // overlay 
  } // helpers
}); // fancybox

Answer 2

Firefox (и IE 9) не любят устанавливать прозрачность наложения.С Chrome все в порядке, но в Firefox + IE9 непрозрачность применяется к самому всплывающему окну.Кажется, что они накладывают слои по-разному для оверлея и содержимого.

Протестировано в Fancybox 2.1.4

 helpers:
 {
       overlay:
       {
              css: { 'background': 'rgba(0, 0, 255, 0.5)' }
       }
 }

Если вы установите RGBAзначение вместо этого тогда будет работать.Вы должны использовать background, а не background-color для переопределения CSS по умолчанию.

Обратите внимание, что сам плагин использует полупрозрачный PNG для наложения.Это хорошо, но есть два недостатка.Во-первых, он должен загружаться, и если вы предварительно не загрузите его, эффект постепенного появления может быть немного запутан при первом открытии всплывающего окна.Во-вторых, большинство браузеров подавляют запросы после отправки формы - поэтому, если вы предварительно не загрузите PNG, наложения вообще не будет.

Answer 3

Вы можете нацелить тег style, который применяется к элементу #fancybox-overlay, используя селектор атрибута, например:

CSS

#fancybox-overlay[style] {
    background-color: blue !important;
}

Answer 4

С Fancybox v1.3:

Параметры наложения по умолчанию :

• overlayOpacity: 0,3
• overlayColor: # 666

Рабочий пример :

$(".fancybox").fancybox({
    overlayOpacity  : 0.8, // Set opacity to 0.8
    overlayColor    : "#000000" // Set color to Black
});

Answer 5

Сегодня это работает. Если вы не хотите использовать цвет фона, установите для него значение none

.fancybox-bg {
   background-color: #FF0004;
}

Answer 6

используйте CSS для BG:

#fancy_bg
{
    background-color:000000 !important;
}

Answer 7

В последней версии помощнику нужен родительский параметр, например:

$.fancybox.helpers.overlay.open({parent: $('body')});

Answer 8

Мне кажется, что css # fancybox-overlay не работает (fb2), я использую .fancybox-skin работает отлично.

.fancybox-skin{
background-color:#121212!important;
}

Answer 9

Опции, встроенные в fancyBox v1, не будут работать, если они не встроены в fancyBox2.И согласно документации fancyBox v2 такой опции overlayColor не существует.

Я предлагаю попробовать изменить цвет background в файле jquery.fancybox.css на #fancybox-overlay.

#fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 1001;
    background: #000;  /* <<-- this one  */
}

---

РЕДАКТИРОВАТЬ на основе комментариев:

Технически правильный ответ: Вы не можете установить параметр overlayColor, потому чтоновая версия не примет этот устаревший параметр.

Однако, если вы хотите отредактировать плагин, это следует сделать ...

вокруг строки 1308 изjquery.fancybox.js вы увидите опции наложения.

opts = $.extend(true, {
    speedIn : 'fast',
    closeClick : true,
    opacity : 1,
    css : {
        background: 'black'  //  <-- this one
    }
}, opts);

this.overlay = $('<div id="fancybox-overlay"></div>').css(opts.css).appendTo('body');