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');
});

Answer 2

您可以使用jquery mobile http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp

$("p").on("tap",function(){
       $(this).hide();
});

模态在页面触摸时淡入淡出

2 个答案: