jquery - Youtube 模式弹出窗口关闭问题

Question

我正在尝试创建一个与此类似的 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>

这是插入代码的方式:

Answer 1

对于问题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;
}