Question

I have return a list of results without a problem.

When you click on an item in that list, the modal shows over the list of clickable items.

When I click the close button at the top right of the modal is fades out then fades back in.

I’ve tried turning the click “off” in the list but don’t have a way to turn it back on.

Since the close button is over the list as well it’s actions are immediately overlooked by the “show” actions of the list beneath the modal.

Here’s the code:

// This does the showing
$('ul.property-content li.box-sizing').on('click',function(){

        $(this).find('.property-modal-wrapper').fadeIn("fast");
        $('ul.property-content li.box-sizing').off('click');// this works

});



// This is inside of the modal element that is inside of the element that does the showing
$('.modal .close').on('click',function(){

        $(this).parentsUntil('li.box-sizing').find('.property-modal-wrapper').fadeOut("fast");
        $('ul.property-content li.box-sizing').on('click');// but can't get this to come back on

});

Answer 1

You probably just need to use .stopPropagation() and not turn off the event handler. Try this:

// This does the showing
$('li').on('click', function() {
    $('#modal').fadeIn("slow");
});

// This is inside of the modal element that is inside of the element that does the showing
$('#modal').on('click', function(event) {
    event.stopPropagation();
    $('#modal').fadeOut("slow");
});​