Colorbox показывает под вспышкой - PullRequest
Новая
       13

Colorbox показывает под вспышкой

6 голосов
/ 02 августа 2010

Я использую цветовую коробку jQuery, чтобы открыть iframe на странице.На странице есть два флеш-файла.Когда я нажимаю кнопку, открывающую цветовую коробку, эти флэш-SWF-файлы появляются поверх моего div цветовой рамки.Я проверил свойства CSS для colorbox, и наложение имеет position:absolute и z-index:999.Я присвоил SWF-файлам свойство z-index:0, но они все еще отображаются поверх палитры.Это происходит в Firefox, IE и Chrome.

Ответы [ 6 ]

7 голосов
/ 17 мая 2011

Для тех, кто использует встраиваемый код iframe из Youtube или Vimeo , вам нужно подойти к нему по-другому.Я использовал события onOpen и onClosed , чтобы скрыть и показать фрейм.Вот пример: 

$('.selector').colorbox({
    inline: true,
    href: '.step.'+target,
    rel: 'steps',
    onOpen: function(){
        $('iframe').css('visibility','hidden');
    },
    onClosed: function(){
    $('iframe').css('visibility','visible');
    },
    loop: false,
    opacity: 0.5
});

Я полагаю, это также работает, если вы хотите применить его к вашему тегу embed или object как быстрое решение.

5 голосов
/ 03 августа 2010
2 голосов
/ 26 января 2012

Если ваша проблема связана с Youtube, вот самый простой способ, который я нашел, чтобы это исправить: 

<iframe src="http://www.youtube.com/embed/b-LJ7pYNI0I?
wmode=transparent" width="590" height="332" frameborder="0" ></iframe>

То есть, добавить последний параметр get '? Wmode = transparent' в iframe src.

источник: http://groups.google.com/group/slimbox-support/msg/39d42c9e0b6a7093

1 голос
/ 28 сентября 2012

Если вы используете iframe для внешнего сайта с флэш-контентом, вы можете использовать следующий код. 

onClosed:function(){
        $('#iframe').attr('src', 'http://iframeurl.com/');
        $('#iframe').show();
},
onOpen:function(){
        $('#iframe').hide();
        $('#iframe').removeAttr('src');
}

наслаждаться.

1 голос
/ 13 февраля 2012

Альтернативная версия Ответ Хорхе : 

onOpen: function(){
  $('embed:visible').css('visibility','hidden').addClass('colorbox-hidden-fix');
},
onClosed: function(){
  $('embed.colorbox-hidden-fix').css('visibility','visible');
}

Это относится к embed элементам, если они есть на ваших страницах. Он также пытается не показывать элементы, которые были изначально скрыты. Должно также работать с другими типами, просто замените embed на например. iframe.

1 голос
/ 03 августа 2010

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

Почти уверен, что это будет проблемой, но может случиться так, что у вас немного запутан порядок размещения элементов div. Помните, что z-индексация не является глобальной иерархией, она берет индекс из родительского элемента.

...