Question

我试图移动＆＃34;关闭＆＃34; youtube的fancybox上的按钮。每当我尝试添加如下代码时：

'onComplete': function(){
   $("#fancybox-close").css({"opacity":"0.5"});
}

链接直接进入Youtube，而不是在模态框内播放。

有什么建议吗？

enter image description here

HTML：

<a class="fancybox-media" href="http://www.youtube.com/watch?v=sqRPrGeBVL0&autoplay=1&autohide=1" >Youtube</a>

使用Javascript：

$(function(){
$("a.fancybox-media").click(function() {
     $.fancybox({
          'padding'             : 0,
          'autoScale'   : false,
          'transitionIn'        : 'none',
          'transitionOut'       : 'none',
          'title'               : this.title,
          'width'               : 680,
          'height'              : 495,
          'autoPlay'            :'true',
          'href'                : this.href.replace(new RegExp("watch\\?v=", "i"),
                                      'v/'),
          'type'                : 'swf',    // <--add a comma here
          'swf'                 : {'allowfullscreen':'true'} // <-- flashvars here
       });
       return false;
  });
 });

注意 -

Answer 1

正如我在其他问题中所提到的，添加到您的脚本

'onComplete': function(){
 $("#fancybox-close").css({"opacity":"0.5"});
}

只需确保将选项与逗号分开，如：

$("a.fancybox-media").click(function() {
 $.fancybox({
  'padding'             : 0,
  'autoScale'   : false,
  'transitionIn'        : 'none',
  'transitionOut'       : 'none',
  'title'               : this.title,
  'width'               : 680,
  'height'              : 495,
  'autoPlay'            :'true',
  'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
  'type'                : 'swf', 
  // the swf option IS NOT the last option anymore so it needs a trialing comma !!!
  'swf'                 : {'allowfullscreen':'true'}, // <-- ADDED a comma here
  'onComplete': function(){
    $("#fancybox-close").css({"opacity":"0.5"});
  }
 });
 return false;
});

DEMO ：见working here

旁注：如果您添加其他选项（例如overlayColor）以更改背景颜色，请始终确保每个选项都由comma分隔，但最后一个。

更新：如果您想更改不透明度 AND 移动关闭按钮，请在相同的onComplete选项中执行此操作，例如

'onComplete': function(){
    $("#fancybox-close").css({"opacity": 0.4,"right": -30});
  }

I updated the DEMO too

UPDATE＃2 （只是为了好玩）：您可以应用有趣的效果，例如恢复鼠标悬停时关闭按钮的不透明度（onComplete选项中的所有内容），例如

  'onComplete': function(){
    $("#fancybox-close").css({"opacity": 0.4,"right": -30})
      .hover(function(){
        $(this).css({"opacity": 1});
      },function(){
        $(this).css({"opacity": 0.4});
      });
   }

（也在DEMO中更新）

Answer 2

为什么不改变CSS？

#fancybox-close {
    opacity: 0.5 !important;
}

试图移动或降低＆＃34;关闭＆＃34;的不透明度。 Fancybox中的按钮

2 个答案: