jquery - quicktime 视频播放器上的 Fancybox zindex

Question

我的任务是创建一个类似 YouTube 的网站。我有一个用于捕获登录信息的 fancybox。我遇到的问题是，当我弹出 fancybox 时，它被放置在我的视频播放器后面。我尝试过使用 z-index，制作 fancybox 模态，将视频播放器 wmode 设置为不透明/透明，隐藏和显示 #T div(有效但重新启动视频并且看起来很糟糕)。这些都没有奏效。我想让登录框位于视频的顶部并位于视频的前面。任何帮助表示赞赏。

这是您想要查看 fancybox 的网站。我把它移了过来，这样你就可以知道它在屏幕上的位置。顺便说一句，它只会在您播放视频时发生，而不是在您查看图片时发生。 http://mmlab.cs.clemson.edu/spring14/g13/metube/media.php?id=1

视频对象代码

<style>
div.T {
     z-index:-500!;
    position:absolute;
    margin-top:20px;
    left:225px;
}
</style>
<div id ="T">
<object id="asdf" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  
       codebase="http://www.apple.com/qtactivex/qtplugin.cab"
       width="854" height="510">
 <param name="src" value="<?php echo $result_row[2].$result_row[1];?>" />
 <param name="autoplay" value="true" />
 <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
 <param name="controller" value="true" />
 <param name="wmode" value="opaque" /> 
 <!--[if !IE]> <-->
   <object id="asdf1"  data="<?php echo $result_row[2].$result_row[1];?>" width="854" height="510" type="video/quicktime"> 
     <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
     <param name="controller" value="true" />
     <param name="wmode" value="opaque" /> 
   </object>

</div>  

花式框代码

<style>
.fancybox-skin{

    position:absolute;
    left:150px; 
    top:-100px;
    z-index:10000;
}

#wrap { 
width: 800px;
margin: 20px auto;
z-index:100000;
}

</style>

$(document).ready(function() {
var results = "";
function fan(){
    $.fancybox({
   href : "#login_form_ajax",
   afterShow: function(){
     //$('#T').hide();         
    },
   afterClose : function(){
    $("#login_error").hide();
    //$('#T').show();    
   }
  });   
}

 $("#top-login-button").click(function() {

  var buttval = "<?php if(isset($_SESSION['username']))echo 'Sign out';else echo 'Sign in';?>";
  if(buttval == "Sign out")
    window.location.href = 'Logout.php';
      else        
        fan();                  
 });  

Answer 1

尝试更改 fancybox 覆盖层上的 z-index 而不是皮肤。

您的 fancybox CSS 文件的第 180 行。

 .fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('fancybox_overlay.png');
  }

尝试将 z-index 更改为更大的数字。我无法测试它，因为您的播放器没有出现。

此外，我强烈建议不要使用像 quicktime 这样的播放器，因为这是人们必须安装的插件。我建议使用带有 Flash 回退功能的 HTML5 播放器，例如 flowplayer.org