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

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

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

Answer 2

这是一个重建选项，我觉得这可能比为每个视频制作 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>

Answer 3

基于您的 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

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

How do I manage multiple overlays on different buttons clicks?

html

javascript

css

iframe

vimeo-api