Modal fade on page touch

Question

So basically I've created a modal which hides on exit using this code:

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

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

I was trying to make it so that when the user touches outside the modal, the modal will fade as well as this.

I tried using:

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

But I had no luck..

Thanks

Answer 1

Minimal example:

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

You can use jquery mobile http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp

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