上一篇: jquery – 具有高Z-Index的绝对定... 下一篇:如何使用jQuery选择属性不透明度...

jquery – 如何添加转义键功能来关闭灯箱？

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 如何添加转义键功能来关闭灯箱？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

@R_674_10850@ESC键,以便在点击时,灯箱也会关闭？

非常感谢.

解决方法

您可以在$(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