javascript - Bootstrap jquery hidden and shown.bs.modal 模态属性不起作用
问题描述
我有一个引导模式。我想在模态打开和关闭时进行操作。但是我的脚本代码在模态的打开和关闭时不起作用。
我想做的是模态视频。如果模式关闭,请停止播放视频。如果模式打开,让视频播放开始。
引导版本 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 与您想要执行的操作匹配时,您就可以执行您的操作。
$(window).on("shown.bs.modal", function(e) {
var modal = e.target;
var $modal = $(modal);
if($modal.attr('id') == 'arcaVideoModal') {
do your stuff
}
});
我还建议不要发送垃圾邮件警报,您必须单击您使用console.log()
的并密切关注您的开发人员控制台。
推荐阅读
- c# - 对象是用我无法改变的自己的旋转实例化的
- reactjs - 使用
代替 - python - 导入 SQLAlchemy 时得到:AttributeError:模块“时间”没有属性“时钟”
- python - 如何在 scikit learn 列选择器管道中只选择几列?
- javascript - 如何通过单击按钮启动 html 表单,然后按钮消失并且表单出现在屏幕上?
- javascript - 使用 Lodash 从 JSON 数据创建导航栏菜单
- css - 如何在 vuetify 中更改样式 prev-icon 和 next-icon 道具
? - c# - 将多个子组件作为参数传递
- r - 如何在 R 中使用 tidyr 将字符串列分成多个其他列
- laravel - Laravel LDAP(Adldap2)无法验证,用户名为空进入保护->尝试