jquery – Youtube模态弹出窗口关闭问题

2019年7月28日 184次阅读

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

这是代码的插入方式：
《jquery – Youtube模态弹出窗口关闭问题》

最佳答案 对于问题1：

您需要将标题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：

您需要使用属性overflow：在显示播放器叠加层时隐藏在主体上,然后在关闭视频叠加层时将其删除.

在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：

将top属性设置为css类mm-product-video-modal.open的百分比为15％

.mm-product-video-modal.open {
   top: 15%;
   margin-bottom: 150px;
}
点赞