Question

I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.

  $('body').on('click', '.cover_slide > *',function(e){
    e.stopPropagation();
  });
  $('body').on('click', '.cover_slide',function(){
    helper.cover.close();
    $('body').off('click', '.cover_slide');
  });

I would like to be able to interact with some elements on my modal box with clicks, but I can’t seem to figure out how to do that AND still have my ‘click off to close’ function. At present all clicks on the box are ignored.

Answer 1

There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is

$(document).bind("click", function(e) {
    if($(e.target).closest("div").hasClass('coverSlide')) {
        //do stuff if someone clicks the box
    }
});