我正在尝试创建一个与此类似的 youtube 模式:https://www.udacity.com/但在使用视觉 Composer 的 wordpress 中。
这个模式有 3 个问题:
1-当点击背景层没有覆盖顶部导航菜单内容时,它们仍然显示。如何强制背景拉伸(stretch)并覆盖菜单?
2-滚动条被隐藏,但用户仍然可以向下滚动滚轮,页面下方的一些元素显示在弹出层的顶部
3-最大的问题在于关闭视频并使弹出层响应。原始代码具有固定大小,我更改为百分比并使其工作但在移动设备中看起来很奇怪
页面链接:
http://blacktrax.cast-soft.com/lighting-test-2/
CSS:
/* begining of master container for popup */
.mm-product-video-modal-container {
position: fixed;
top: 0px;
left: 0px;
z-index: 10000;
width: 100%;
height: 100%;
background: #03070D;
display: none;
overflow: hidden; /* hides the scrollbar for the master container popup */
}
/* end of master container */
.mm-product-video-modal-container.open {
display: block;
}
.mm-product-video-modal-close:hover {
cursor: pointer;
}
.mm-product-video-modal-close {
color: #fff;
position: fixed;
z-index: 1000000000;
top: 20px;
right: 20px;
font-size: 40px;
}
/* begining of video modal container*/
.mm-product-video-modal {
width: 70%;
height: 70%;
max-height: 664px;
overflow: hidden;
position: relative;
top: -1000px; /* position where the video modal box is generated*/
text-align: center; /* centralized video*/
vertical-align: middle;
border-radius: 4px;
}
/* end of video modal container */
.mm-product-video-modal.open {
top: 150px;
margin-bottom: 150px;
}
.mm-video-overlay {
position: fixed;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
z-index: -1;
}
.mm-launch-container {
margin-top: 2em;
}
.mm-launch {
border: none;
color: #ffff;
padding: 5px 60px;
font-size: 25px;
}
.mm-launch-container p {
text-align: justify;
font-size: 16px;
font-weight: 300;
margin-bottom: 30px;
}
.mm-launch-container h2 {
font-size: 50px;
font-weight: 800;
letter-spacing: -1px;
margin-bottom: 20px;
}
.dropper {
transition: top 0.5s ease-in-out;
}
Javascript:
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 1180,
height: 664,
videoId: 'gZC1TOLVi60',
events: {
onReady: initialize
}
});
}
function initialize(){
}
function deployVideo() {
jQuery('.mm-product-video-modal-container').addClass('open');
setTimeout(function() {
jQuery('.mm-product-video-modal').addClass('open');
player.playVideo();
}, 250);
}
function destroyVideo() {
jQuery('.mm-product-video-modal').removeClass('open');
setTimeout(function() {
jQuery('.mm-product-video-modal-container').removeClass('open');
player.pauseVideo();
}, 250);
}
jQuery('.mm-video-overlay').on('click', function() {
destroyVideo();
});
jQuery('.mm-launch').on('click',function() {
deployVideo();
});
</script>
HTML:
<script src="https://www.youtube.com/iframe_api"></script>
<div align="center" class="mm-product-video-modal-container">
<div class="mm-product-video-modal dropper">
<div class="embed-responsive embed-responsive-16by9">
<div id="video-placeholder"></div>
</div>
</div>
<div class="mm-video-overlay"></div>
</div>
<div class="mm-launch-container container" align="center">
<div class="col-sm-offset-3 col-sm-6">
<button class="mm-launch">Launch Video</button>
</div>
</div>
最佳答案
对于问题1:
您需要将 header z-index 设置为比叠加层低的值。 在样式中添加以下 css 类以覆盖标题 z-index。
header{
z-index:1 !important;
}
同时调整css类mm-video-overlay
的z-index为1001
.mm-video-overlay {
position: fixed;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
z-index: 1001;
}
对于问题2:
当显示播放器覆盖时,您需要在 body 上使用属性 overflow:hidden
,然后在关闭视频覆盖时将其删除。
在js中使用的代码:
function deployVideo() {
jQuery('.mm-product-video-modal-container').addClass('open');
setTimeout(function() {
jQuery('.mm-product-video-modal').addClass('open');
player.playVideo();
}, 250);
jQuery('body').css('overflow','hidden');
}
function destroyVideo() {
jQuery('.mm-product-video-modal').removeClass('open');
setTimeout(function() {
jQuery('.mm-product-video-modal-container').removeClass('open');
player.pauseVideo();
}, 250);
jQuery('body').css('overflow','');
}
这将解决滚动问题
对于问题3:
将 css 类 mm-product-video-modal.open
的 top 属性设置为 15%
.mm-product-video-modal.open {
top: 15%;
margin-bottom: 150px;
}
关于jquery - Youtube 模式弹出窗口关闭问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40493526/