javascript - 页面触摸时模态淡入淡出

Question

所以基本上我已经使用以下代码创建了一个在退出时隐藏的模式:

$('#emailToggle').on('click', function() {
    $('body').toggleClass('dialogOpen');
});

$(document).keyup(function(e) {
    if($('body').hasClass('dialogOpen')) {
        if(e.keyCode == 27) $('body').toggleClass('dialogOpen');
    }
});

我试图做到这一点，以便当用户触摸模式之外时，模式也会随之淡出。

我尝试使用:

$(document).on('click', function(){});

但是我没有运气..

谢谢

Answer 1

最小示例:

CSS:

.overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.modal{
    z-index: 4;
}

.showOverlay{
    display: block;
}

JavaScript:

$('.overlay').on('click', function() {
    $('body').toggleClass('dialogOpen');
    $(this).toggleClass('showOverlay');
});