Question

I’m using twitters bootstrap modal with my own backdrop, this is so the modal behaves like the Pinterest modal (body-noscroll and scrollbars match modal height).

My code to close the modal is:

$(".modal-container").click(function(e) {
    $('.modal-container .modal').modal('hide');
});
$('.modal').live('hidden', function () {
    $('body').removeClass('noscroll');
    $('.modal-container').hide();
});

When the user clicks inside .modal however, this function still runs, which I dont want. Can anyone help?

Thanks.

So the html is:

<div class="modal-container">
    <div class="modal">
        Content
    </div>
</div>

Css is:

.modal-container {
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
.modal {
    position: absolute;
    margin-bottom: 150px;
    width: 630px;
    margin-left: -315px;
    border: 1px solid #e7e7e7;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    z-index: 1052;
    cursor: default;
}

Answer 1

edited out my e.stopPropagation answer as it won’t work with event delegation which OP requests

As commented by @Adeneo, a usually simpler solution is to just check if the event target, that is, the element which originated the click event corresponds to the one that you attached the click handler to:

$(".modal-container").click(function(e) {
    if (e.target === this) $('.modal-container .modal').modal('hide');
});