Bootstrap jquery hidden and shown.bs.modal 模态属性不起作用答案

【问题标题】：Bootstrap jquery hidden and shown.bs.modal modal property does not workBootstrap jquery hidden and shown.bs.modal 模态属性不起作用
【发布时间】：2019-02-05 10:31:53
【问题描述】：

我有一个引导模式。我想在模态打开和关闭时进行操作。但是我的脚本代码在模态的打开和关闭时不起作用。

我想做的是模态视频。如果模式关闭，请停止播放视频。如果模态打开，让视频播放开始。

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">&times;</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 方法在这里不起作用？在模态中打开和关闭模态时如何在模态中做事

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

您需要在窗口上侦听才能触发事件。然后检查事件的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() 并密切关注您的开发者控制台。

【讨论】：

我知道谢谢。 Console.Log 是一个更快的解决方案。 Cevap için teşekkürler fakat bir çözüm değil。谢谢你给我的想法。 @Tschallacka

【解决方案2】：

我找到了这个问题的答案。我为在我之后可能需要它们的朋友分享下面的解决方案。 适合所有人的编码。非常感谢。

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

将触发的播放和暂停功能写入单独的脚本标签。这是我的问题的解决方案。可能有不同的解决方法。我们喜欢不同的想法:)

【讨论】：