Question

＆＃13;

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";
  }
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 1

基于你的html和jquery。这是你需要做的。而不是制作2个功能。保留一个功能以使用iframe ID作为toggleOverlay(playerid)参数进行切换。由于您的视频iframe id的父div是特殊框，而specialbox父是覆盖本身。您可以使用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更改为＆＃34; overlay2＆＃34;。

以下是工作示例：

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>

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

3 个答案: