Question

我正在使用带有我自己背景的twitters bootstrap模态，这样的模态就像Pinterest模态（body-noscroll和scrollbars匹配模态高度）。

关闭模式的代码是：

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

当用户点击.modal内部时，此功能仍然运行，我不想要。有人可以帮忙吗？

感谢。

所以html是：

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

Css是：

.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

删除了我的e.stopPropagation答案，因为它不适用于OP请求的事件委托

正如@Adeneo所评论的，一个通常更简单的解决方案是检查event target，即发起click事件的元素是否与你附加点击处理程序的元素相对应：

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

如果在div中单击div，则阻止jquery单击功能

1 个答案: