如何管理不同按钮点击的多个叠加层？

Question

function toggleOverlay_1() {
  var overlay = document.getElementById('overlay');
  var specialBox = document.getElementById('specialBox_1');
  overlay.style.opacity = .8;
  if (overlay.style.display == "block") {
    overlay.style.display = "none";
    specialBox.style.display = "none";
  } else {
    overlay.style.display = "block";
    specialBox.style.display = "block";
  }
}

function toggleOverlay_2() {
  var overlay = document.getElementById('overlay');
  var specialBox = document.getElementById('specialBox_2');
  overlay.style.opacity = .8;
  if (overlay.style.display == "block") {
    overlay.style.display = "none";
    specialBox.style.display = "none";
  } else {
    overlay.style.display = "block";
    specialBox.style.display = "block";
  }
}

div#overlay {
  display: none;
  z-index: 2;
  background: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
}
div#specialBox_1 {
  display: none;
  position: fixed;
  z-index: 3000;
  height: 100%;
  width: 100%;
  background: #FFF;
  color: #000;
}
div#specialBox_2 {
  display: none;
  position: fixed;
  z-index: 3000;
  height: 100%;
  width: 100%;
  background: #FFF;
  color: #000;
}
div#wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  padding-left: 24px;
}
.closebtn {
  position: absolute;
  top: 0%;
  right: 45px;
  font-size: 40px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<div id="overlay">
  <div id="specialBox">
    <iframe id="myVid_1" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"></iframe>
    <div class="closebtn">
      <a href="javascript:void(0)" onclick="toggleOverlay_1();">&times;</a>
    </div>
  </div>
</div>

<div id="overlay">
  <div id="specialBox">
    <iframe id="myVid_2" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe>
    <div class="closebtn">
      <a href="javascript:void(0)" onclick="toggleOverlay_2();">&times;</a>
    </div>
  </div>
</div>

<div id="wrapper">
  <input type="button" name="Google_Red" class="button_red" value="Google" a href="#" onclick="toggleOverlay_1()"></input>
  <br>

  <input type="button" name="W3Schools Red" class="button_red" value="Sealed Air" a href="#" onclick="toggleOverlay_2()"></input>
  <br>
</div>

我正在尝试在不同的按钮点击时打开不同的视频（在叠加层中）。如果我只使用一个按钮并正确打开视频，我可以做到这一点。但是当我尝试将不同的视频绑定到不同的按钮时，它只会将一个视频绑定到所有按钮。有人可以告诉我如何解决这个问题吗？

Answer 1

基于您的 html 和 jquery。这是您需要做的。而不是制作2个功能。使用 iframe id 作为参数 toggleOverlay(playerid) 保留一个用于切换的功能。由于您的视频 iframe id 的父 div 是特殊框，而特殊框父级是叠加层本身。您可以利用 jquery 的 .parent() 方法进行设置。

function toggleOverlay(playerid){
  $("#" + playerid).parent("#specialBox").parent().css("opacity",".8");
  $("#" + playerid).parent("#specialBox").parent().toggle();
  $("#" + playerid).parent("#specialBox").toggle();
}

现在在按钮或您调用 toggleOverlay 函数的任何地方，添加唯一的 playerid 作为参数，并根据哪个按钮处理哪个叠加层来设置。

您也不能有 2 个具有相同 id 的 div。因此，将第二个叠加层 div id 更改为“overlay2”。

这是工作示例：

http://codepen.io/Nasir_T/pen/pEmEJE

Answer 2

因为您使用 ID 定位 div，所以 DOM 将采用具有该 ID 的第一个 div（您的第一个视频）。因此，您必须使用另一个 ID 来定位您的第二个叠加层。

Answer 3

这是一个重建选项，我觉得这可能比为每个视频制作所有 javascript 更容易。

// This part isnt needed but I added it in case you wanted it

// Get the modals
var modal = document.getElementById('id01');
var modal2 = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
  if (event.target == modal2) {
    modal2.style.display = "none";
  }
}

.modal {
  z-index: 3;
  display: none;
  padding-top: 100px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4)
}
.modal-content {
  margin: auto;
  background-color: #fff;
  position: relative;
  padding: 0;
  outline: 0;
  width: 600px
}
.container {
  padding: 0.01em 16px
}
.closebtn {
  text-decoration: none;
  float: right;
  font-size: 30px;
  font-weight: bold;
}
.closebtn:hover,
.closebtn:focus {
  color: red;
  cursor: pointer
}

<button onclick="document.getElementById('id01').style.display='block'">Open Video 1</button>
<button onclick="document.getElementById('id02').style.display='block'">Open Video 2</button>

<!-- Video 1 -->
<div id="id01" class="modal">
  <div class="modal-content">
    <div class="container">
      <span onclick="document.getElementById('id01').style.display='none'" class="closebtn">&times;</span>
      <iframe src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"></iframe>
    </div>
  </div>
</div>

<!-- Video 2 -->
<div id="id02" class="modal">
  <div class="modal-content">
    <div class="container">
      <span onclick="document.getElementById('id02').style.display='none'" class="closebtn">&times;</span>
      <iframe src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe>
    </div>
  </div>
</div>