如何通过单击视口中的任意位置来关闭 Bootstrap/Lightbox 模式？

【问题标题】：How do I close a Bootstrap/Lightbox modal by clicking anywhere within the viewport?如何通过单击视口中的任意位置来关闭 Bootstrap/Lightbox 模式？
【发布时间】：2019-02-02 17:17:31
【问题描述】：

当灯箱图像出现时，我只能通过单击它外部来关闭模式。我想通过单击视口中的任意位置以及使用 Esc 或空格键来关闭模式。

【问题讨论】：

标签： twitter-bootstrap bootstrap-modal lightbox

【解决方案1】：

希望我能正确理解您的问题。我读到的方式是，您还想在单击内部时关闭模态/灯箱。这将像这样完成：

$('#yourModalID').on('click', function(){
    $(this).modal('close');
});

您还想在按空格键时关闭模式。你可以这样做：

$('body').on('keyup', function(event){
    if (event.keyCode == 32){ //check if the key pressed was the space bar
         $('#yourModalID').modal('hide');
    }
});

您应该只在打开模式时添加此事件侦听器，并在模式关闭时删除它以获得更好的性能。

【讨论】：