【发布时间】：2017-03-22 11:16:30
【问题描述】：
我正在尝试创建一个类似于以下内容的 youtube 模态：https://www.udacity.com/，但在使用视觉作曲家的 wordpress 中。
我在使用此模式时遇到 3 个问题：
1-当点击背景层不覆盖顶部导航菜单内容时，它们仍然显示。如何强制背景拉伸并覆盖菜单？
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>
【问题讨论】：