1

我在自己的背景下使用 twitters bootstrap 模态，这样模态的行为就像 Pinterest 模态（body-noscroll 和滚动条匹配模态高度）。

我关闭模式的代码是：

$(".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;
}
4

1 回答 1

2

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

正如@Adeneo 所评论的，一个通常更简单的解决方案是只检查事件目标，即发起点击事件的元素是否对应于您将点击处理程序附加到的元素：

$(".modal-container").click(function(e) {
    if (e.target === this) $('.modal-container .modal').modal('hide');
});
于 2013-01-13T17:59:11.037 回答