Jquery z索引和iframe问题-下拉菜单
嘿。我的下拉菜单和iFrame有一个相当令人困惑的问题 我对下拉菜单应用了1000的z索引,但是包含youtube视频的iframe仍然显示在菜单上方。请参见以下内容(查看“快捷代码”菜单): 我不明白这是为什么。有人能帮我吗?以下是CSS(如果有帮助):Jquery z索引和iframe问题-下拉菜单,jquery,iframe,z-index,Jquery,Iframe,Z Index,嘿。我的下拉菜单和iFrame有一个相当令人困惑的问题 我对下拉菜单应用了1000的z索引,但是包含youtube视频的iframe仍然显示在菜单上方。请参见以下内容(查看“快捷代码”菜单): 我不明白这是为什么。有人能帮我吗?以下是CSS(如果有帮助): #jquery-dropdown { position: absolute; bottom: 0; right: 10px; } #jquery-dropdown ul { margin: 0; padding: 0; list-styl
#jquery-dropdown {
position: absolute;
bottom: 0;
right: 10px;
}
#jquery-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}
#jquery-dropdown ul li {
margin: 0;
padding: 15px 10px 15px 10px;
position: relative;
float: left;
}
#jquery-dropdown ul li a {
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #707070;
outline: none;
}
#jquery-dropdown ul li ul {
position: absolute;
left: -10px;
top: 46px;
display: none;
background: #f4f4f4;
border: 1px solid #e1e1e1;
border-top: none;
z-index: 1000;
padding: 5px 0;
-moz-box-shadow: 1px 2px 3px #a4a4a4;
-webkit-box-shadow: 1px 2px 3px #a4a4a4;
box-shadow: 1px 2px 3px #a4a4a4;
}
#jquery-dropdown ul li ul li {
margin: 0;
padding: 0;
float: none;
position: relative;
z-index: 1000;
}
#jquery-dropdown ul li ul li a {
width: 180px;
padding: 10px;
z-index: 1000;
}
#jquery-dropdown ul li ul li a:hover {
background: #e0e0e0;
}
在我的机器上(Windows 7上的Chrome),显示YouTube视频的插件与浏览器内容窗口不同。我认为,当插件以这种方式运行时,它会在浏览器中的任何其他内容之上呈现,而忽略CSS z索引值
Silverlight插件有一个设置,可以使其在浏览器内容窗口中运行,而不是在自己的本机窗口中运行。您可以尝试为嵌入式YouTube播放器找到一个类似的设置。Flash并不总是在所有浏览器上都能很好地使用z-index,在我的firefox上看起来不错 我将使用
标记嵌入youtube视频,而不是Iframe。然后,我会在
中使用
。大概是这样的:
<object width="640" height="385"><param name="wmode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
如果要继续使用嵌入Youtube视频的
iframe
方法,只需通过查询变量?WMODE=transparent
设置WMODE即可。下面是一个例子:
<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M" frameborder="0" allowfullscreen></iframe>
将成为:
<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M?wmode=transparent" frameborder="0" allowfullscreen></iframe>
请记住检查Youtube URL以查找任何已存在的查询变量。如果已经有了
?东西…
请将?wmode=transparent
更改为&wmode=transparent
,并将其钉在末端。如果?wmode=transparent不起作用,请尝试切换为不透明。这对我来说很有效
样本:
(function ($) {
$ = jQuery;
$(function () {
$video = $("#SomeWrapper> iframe");
$srcVal = $video.attr('src');
appendedVal = $srcVal + "?wmode=opaque";
$video.attr('src',appendedVal);
});
})(jQuery);
这是一个iframe问题,不是z索引。我遇到的问题与我遇到的问题相同,我只是将?wmode=transparent添加到YouTube嵌入i frame src url中。像这样:
<div class="tube_box">
<iframe width="500" height="300" src="https://www.youtube.com/embed/ngKxlkoZBLA**?wmode=transparent**" frameborder="0" allowfullscreen ></iframe>
</div>
It Works in all browser IE,Firefox and chrome
Here My Css :
.tube_box{
float:left;
width:515px;
border:5px groove #d1e7ed;
border-radius:11px;
margin-bottom:10px;
color:#b8b8bf;
padding:10px;
z-index: 1000 ;
}
If you add the position:relative,absolute or anything again the drop down hiding.So avoid position its better.Another thing is not important to add the z-index,Without z-index also it will work .Hope so it will really helpful for you
它适用于所有浏览器IE、Firefox和chrome
这里是我的Css:
.试管盒{
浮动:左;
宽度:515px;
边框:5px槽#d1e7ed;
边界半径:11px;
边缘底部:10px;
颜色:#b8b8bf;
填充:10px;
z指数:1000;
}
如果你再添加位置:相对、绝对或任何下拉隐藏。因此避免位置更好。另一件事不重要的是添加z索引,没有z索引也会起作用。希望它真的对你有帮助
谢谢!这对我帮助很大。也谈到这个问题。