我使用以下脚本创建了一个灯箱:
<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>
Run Code Online (Sandbox Code Playgroud)
如何实现ESC键,以便在点击时,灯箱也会关闭?
非常感谢.
小智 12
您可以在$(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();
}
});
});
Run Code Online (Sandbox Code Playgroud)