Question

我有以下模式框：

<div class="modal-video" id="v-5417">
<div class="video-player">
                <video id="v-5417-tape" preload="none">
                    <source type="video/mp4" src="videos/anthem-od47.mp4">
                    <source type="video/webm" src="videos/anthem-od47.webm">
                </video>
                <div class="close-modal fade-control"></div>
</div>
</div>

并尝试使用以下e.keyCode关闭模式：

        $(document).keydown(function (e) {
            if (e.keyCode == 27) {
                $(".modal-video").hide();
            }
        });

这只是隐藏视频，但没有关闭模式并杀死视频。我怎样才能完全关闭模态和视频？

Answer 1

jQuery .hide（）只是将CSS样式更改为display：none，因此您的视频会被隐藏并仍在后台播放。要解决此问题，您可以停止按standard HTML5 pause() method播放视频。

如果隐藏$（“。modal-video”）对您不起作用，那么我假设您需要隐藏它的父级 - 但我们必须看到更多代码以确保这一点。

$(document).keydown(function (e) {

    if (e.keyCode == 27) {

        var video = document.getElementById("v-5417-tape");
        video.pause()

        $(".modal-video").parent().hide();


    }
});

如果您正在使用某种播放器模板或插件，并且单击“close-modal”类隐藏了您所期望的模式 - 那么您可以使用jQuery .toggle（）方法来调用该元素上的click事件，你按下你的钥匙。

$(document).keydown(function (e) {

    if (e.keyCode == 27) {

        var video = document.getElementById("v-5417-tape");
        video.pause()

        $(".close-modal").toggle("click")


    }
});

Answer 2

必须删除活动状态，并禁用弹出窗口。

$(document).keydown(function (e) {
        var video = document.getElementById("v-5417-tape");
        if (e.keyCode == 27) { 
        if(video.play){
            video.pause();
        }
            $(".modal-video").removeClass("active");

        }
    });

用e.keypress关闭模态

2 个答案: