如何添加转义键功能来关闭灯箱？答案

【问题标题】：How to add escape key functionality to close light box?如何添加转义键功能来关闭灯箱？
【发布时间】：2012-06-15 21:38:18
【问题描述】：

我使用以下脚本创建了一个灯箱：

<script type="text/javascript">
    $(document).ready(function(){
            $(".BtnAction").click(function(){                               
                var objPopup = $($(this).attr("rel"));

                var mask = $("<div/>", {
                    id : "mask",
                    style: "background:#000; display:block;top:0;left:0;position:absolute;opacity:0.8;filter: alpha(opacity=80);width:100%;height:100%;z-index:9998;",
                    click: function(){
                        $(objPopup).hide();
                        $(this).remove();   
                    }       
                }); 

                $(".PopupWrap").before(mask);
                objPopup.show();
            });

            $(".CloseIcon").click(function(){
                $(this).parent().hide();
                $("#mask").remove();
            });

    });
</script>

如何实现 ESC 键，以便在单击时灯箱也会关闭？

非常感谢。

【问题讨论】：

标签： jquery lightbox

【解决方案1】：

您可以在 $(document).ready() 块中向文档添加一个 esc 键侦听器，并重复您当前为 $('.CloseIcon').click() 函数使用的代码，但要针对灯箱的 ID：

$(document).ready(function(){

// Your existing code

    $(document).keyup(function(e) { 
        if (e.keyCode == 27) { // esc keycode
            $('#lightboxId').hide();
            $('#mask').remove();
        }
    });
});

https://stackoverflow.com/a/3369624/1010337

【讨论】：

哇，非常感谢！那肯定有帮助。由于我有几个不同选择器针对的灯箱，因此我将代码更改为： //escape functionality $(document).keyup(function(e) { if (e.keyCode == 27) { // esc keycode $("#popup1, #popup2, #popup3, #popup4, #popup5").hide(); $('#mask').remove(); } });
很高兴它有帮助，最后一件事；与其通过唯一的 ID 来定位每个灯箱，不如为它们添加一个类，您可以使用它们来定位它们，例如$('.js-灯箱')。这样，如果您添加/删除某些内容，您将不需要更改脚本。