Question

试图创建一个视频模态，其中包含3个图像，这些图像彼此相邻并具有单独的模态。单击这些图像会弹出视频模式。所以我在JavaScript中创建了3个单独的ID，点击后将打开3不同的视频..但问题是我可以播放2个视频第一个和第二个，但第三个不播放。当点击第三个图像时，它播放第一个视频。只能单击单个图像播放单个视频。我该如何解决？

<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal({backdrop: false});
});

$("#myBtn1").click(function(){
$("#myModal1").modal({backdrop: false});
});

$("#myBtn2").click(function(){
$("#myModal2").modal({backdrop: false});
});

});
</script>

<div class="container">
<a href="#" data-toggle="modal"><img id="myBtn" src="images/video1.png">
</a>
<a href="#" data-toggle="modal"><img id="myBtn1" src="images/video1.png">
</a>
<a href="#" data-toggle="modal"><img id="myBtn2" src="images/video1.png">
</a>
<!-- Modal -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<iframe class="size" src="https://www.youtube.com/embed/PD0Yd0l3-0I?autoplay=1";frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="myModal1" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<iframe class="size" src="https://www.youtube.com/embed/Jiji_1iosv4?autoplay=1" ;frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<iframe class="size" src="https://www.youtube.com/embed/y8gvEtmay9M?autoplay=1" ;frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>

Answer 1

您不需要javascript来打开模态。您只需使用HTML标记即可。但是，您需要使用JavaScript管理播放（关闭时停止等）。

<div class="container">
<a href="#myModal" data-backdrop="static" data-toggle="modal"><img id="myBtn" src="images/video1.png">
</a>
<a href="#myModal1" data-backdrop="static"  data-toggle="modal"><img id="myBtn1" src="images/video1.png">
</a>
<a href="#myModal2" data-backdrop="static"  data-toggle="modal"><img id="myBtn2" src="images/video1.png">
</a>
<!-- Modal -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<iframe class="size" src="https://www.youtube.com/embed/rFuEu3dj-nA?autoplay=1" ;frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="myModal1" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<iframe class="size" src="https://www.youtube.com/embed/ZHfRHKbd_fE?autoplay=1" ;frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<iframe class="size" src="https://www.youtube.com/embed/JCdfecir86Y?autoplay=1" ;frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>

这是一个JavaScript版本

https://jsfiddle.net/aaronfranco/L6xvLcuL/14/

bootstrap视频模式弹出窗口

1 个答案: