如何同时使用单击和退出键隐藏对象？答案

【问题标题】：How to hide object using both a click and the escape key?如何同时使用单击和退出键隐藏对象？
【发布时间】：2015-02-12 10:47:15
【问题描述】：

我想添加在此框外单击并使用转义键的功能。我该怎么做呢？

以下是通过单击隐藏元素的工作代码：

 $('.player-wrapper, .player .close').click(function(){
var source = $('.brand-video').find('iframe').attr('src');
  $('.brand-video').find('iframe').attr('src', '');
  $('.brand-video').find('iframe').attr('src', source);
$('.player-wrapper').hide().css('opacity', 0);
$('html').css('overflow', 'visible');
$('.player').css({
  transform:'scale(0,0)',
  '-webkit-transform':'scale(0,0)',
  '-moz-transform':'scale(0,0)',
  '-o-transform':'scale(0,0)'
}).hide();
$('.player-wrapper').removeClass('video');
});

如何添加转义键？谢谢你的帮助！这是网站：https://icelandicforyes.com/home-storefront/

【问题讨论】：

标签： javascript jquery user-interface overlay user-experience

【解决方案1】：

你可能会做这样的事情。

var KEYCODE_ESC = 27;

function hideVideo() {
    var source = $('.brand-video').find('iframe').attr('src');
    $('.brand-video').find('iframe').attr('src', '');
    $('.brand-video').find('iframe').attr('src', source);
    $('.player-wrapper').hide().css('opacity', 0);
    $('html').css('overflow', 'visible');
    $('.player').css({
        transform:'scale(0,0)',
        '-webkit-transform':'scale(0,0)',
        '-moz-transform':'scale(0,0)',
        '-o-transform':'scale(0,0)'
    }).hide();

    $('.player-wrapper').removeClass('video');
}

$(document).keyup(function(e) {
    if (e.keyCode == KEYCODE_ESC) { hideVideo(); } 
});

$('.player-wrapper, .player .close').click(function(){ hideVideo(); });

【讨论】：