Question

我的任务是创建一个像网站一样的YouTube。我有一个用于捕获登录信息的fancybox。我遇到的问题是当我弹出fancybox它放在我的视频播放器后面。我尝试过使用z-index，制作fancybox模式，将视频播放器设置为不透明/透明，隐藏并显示#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>

fancybox代码

<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这样的播放器，因为这是插件人必须安装的。我建议使用带有flowplayer.org

等闪回后退的HTML5播放器

快速视频播放器上的Fancybox z索引

1 个答案: