我试图添加2个或更多按钮来激活只有一个Script / js代码的视频，但第二个按钮不起作用。
我的想法不是使用大量基本相同的脚本来堆叠或重载我的页面。我知道这是1级超级基础，但我无法在互联网上找到答案。
这是我的代码：
var modal = document.getElementById('myModal');// Get the modal
var btn = document.getElementById("myBtn");// Get the button that opens the modal
var span = document.getElementsByClassName("close")[0];// Get the <span> element that closes the modal
btn.onclick = function() {modal.style.display = "block";}// When the user clicks the button, open the modal
span.onclick = function() {modal.style.display = "none";}// When the user clicks on <span> (x), close the modal
window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}// When the user clicks anywhere outside of the modal, close it.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
/* background dark */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid black;
text-shadow: 0px 0px;
box-shadow: 0 11px 11px 0 rgba(0,0,0,0.4),0 16px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #515c70;
color: white;
}
.modal-body {padding: 12px 16px;} /* video frame */
.modal-footer {
padding: 2px 16px;
background-color: #515c70;
color: white;
#myVideo {
position: fixed;
right: 0;
bottom: 0;
}<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<div id="my_buttons">
<button id="myBtn" class="button" >Boton 1</button>
<div id="myModal" class="modal">
<div style="width:60%" class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<video autoplay muted loop weight=100% width=100%>
<source src="video_code/A.mp4" type="video/mp4">
</video>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<button id="myBtn" class="button" >Boton 2</button>
<div id="myModal" class="modal">
<div style="width:60%" class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<video autoplay muted loop weight=100% width=100%>
<source src="video_code/A.mp4" type="video/mp4">
</video>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<div>我建议给你的按钮一个类和一个数据属性来指定它将触发的目标。
与此类似的东西：
<button class="js-toggle" data-target="#modal-1">Button 1</button>
<button class="js-toggle" data-target="#modal-2">Button 2</button>
<div id="modal-1">Modal 1</div>
<div id="modal-2">Modal 2</div>
<script>
$('.js-toggle').on('click', function() {
var target = $(this).data('target');
$(target).toggleClass('is-active');
});
</script>