如何为jQuery自定义alertWindow弹窗添加键盘按键关闭功能？

问题根源 #

普通div元素默认无法获得焦点，绑定在.alertWindow1上的键盘事件无法被触发，必须将键盘事件绑定到全局document对象上才能正常监听按键操作。

修改后完整代码 #

<script type="text/javascript">
jQuery.extend({
    alertWindow: function (e, n) {
        var e = e, r;
        n === undefined ? r = "#00a8b7" : r = n;
        // 统一按键关闭处理逻辑
        function closeOnKeydown(event) {
            // 当前为ESC(27)、空格键(32)触发关闭，删除if判断可实现任意按键关闭
            if (event.keyCode == 27 || event.keyCode == 32) {
                $(".alertWindow1").hide();
                $(document).off('keydown', closeOnKeydown);
            }
        }
        if ($("body").find(".alertWindow1").length === 0) {
            var i = '<div class="alertWindow1" style="width: 100%;height: 100%; background:rgba(0,0,0,0.5);position: fixed; left:0px; top: 0px; z-index: 9999;"><div id="successImg" style="margin-top:200px;margin-left:20px;text-align:center;" ></div></div>';
            $("body").append(i);
            var s = $(".alertWindow1");
            var ddbarcode = $('#hidbarcode').val();
            if (ddbarcode != "") {
                displayCard(ddbarcode);
            }
            // 原有点击关闭逻辑，关闭时同步解绑键盘事件
            $('.alertWindow1').click(function (event) {
                s.hide();
                $(document).off('keydown', closeOnKeydown);
            });
            // 绑定全局键盘监听事件
            $(document).on('keydown', closeOnKeydown);
        } else {
            $(".alertWindowContent").text(e);
            $(".alertWindow1").show();
            // 弹窗显示时重新绑定键盘监听
            $(document).on('keydown', closeOnKeydown);
            setTimeout(function () {
                $(".alertWindow1").hide();
                // 自动关闭时解绑键盘事件
                $(document).off('keydown', closeOnKeydown);
            }, 1000);
        }
    }
})
</script>

功能说明 #

• 完全保留原有点击弹窗任意位置关闭、1秒自动关闭的逻辑
• 默认支持ESC键、空格键关闭弹窗，删除代码中的if判断条件即可实现任意按键关闭
• 弹窗关闭后自动解绑全局键盘事件，不会干扰页面其他功能的正常运行

内容的提问来源于stack exchange，提问作者cikkidess