jquery - 试图移动或降低 Fancybox 中“关闭”按钮的不透明度

Question

我试图移动 youtube 上的“关闭”按钮。每当我尝试添加如下代码时：

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

该链接直接指向 Youtube，而不是在模态框中播放。

有什么建议么？

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

As I mentioned in the other question, add to your script

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

just make sure that you separate the options with a comma like:

$("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: See it working here

Side notes: if you add another option, like overlayColor to change the background color, always make sure that every option is separated by a comma but the last.

UPDATE: If you want to change the opacity AND move the close button, do it within the same onComplete option like

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

I updated the DEMO too

UPDATE #2 (just for fun): You could apply interesting effects like restoring the opacity of the close button on mouse hover (everything within the onComplete option) like

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

(also updated in the DEMO)

Answer 2

为什么不改变CSS？

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