我有一个bootstrap模式。我想在模态打开和关闭时进行操作。但是我的脚本代码在模态的打开和关闭时不起作用。
我想做的是模态视频。如果模式已关闭,请停止播放视频。如果模态打开,则开始播放视频。
Bootstrap版本3.3.7,jquery版本3.2.1。 hidden.bs.modal和shown.bs.modal方法在这里不起作用。
<script>
// Test - shown.bs.modal
$("#arcaVideoModal").on("shown.bs.modal", function () {
alert('Work shown');
});
// Test - hidden.bs.modal
$("#arcaVideoModal").on("hidden.bs.modal", function () {
alert('Work hidden');
});
</script>
// My application code
<!-- Modal -->
<div class="modal fancybox-show-caption" id="arcaVideoModal" data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<video id="video1" width="320" height="240" controls>
<source src="/Documents/arca-cm18.mp4" type="video/mp4">
</video>
</div>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
//Video play
$("#btn_play").on("click", function () {
alert("video play");
var video = $('#video1')[0];
video.play();
});
//video stop
$("#arcaVideoModal").on('hidden.bs.modal', function () {
alert("hidden video play");
var video = $('#video1')[0];
video.pause();
});
});
</script>
为什么hidden.bs.modal和shown.bs.modal方法在这里不起作用?当模态打开和关闭模态时,如何在模态中执行操作
您需要在窗口上聆听要触发的事件。然后检查事件的target
,看看它是否是你的模态触发的正确模态。当模态的ID与您想要对其进行操作的ID相匹配时,请执行您的操作。
$(window).on("shown.bs.modal", function(e) {
var modal = e.target;
var $modal = $(modal);
if($modal.attr('id') == 'arcaVideoModal') {
do your stuff
}
});
我还建议您不必发送垃圾邮件警报,而是必须单击“使用console.log()
”并密切关注开发人员控制台。
我找到了这个问题的答案。我可以为我的朋友分享下面的解决方案。适合每个人的好编码。非常感谢。
<script>
$(document).ready(function () {
//Video play
$("#btn_play").on("click", function () {
var video = $('#video1')[0];
video.play();
});
});
</script>
<script>
$(document).on('hidden.bs.modal', function () {
var video = $('#video1')[0];
video.pause();
});
</script>
播放和暂停功能将被触发以写入单独的脚本标记。这是我的问题的解决方案。可能有不同的解决方法。我们喜欢不同的想法:)