javascript - 单击正文时关闭模式

Question

我用 CSS 和 Javascript 制作了一个简单的纯模态。这是代码:
HTML:

<button data-role="toggle-modal" data-toggle="#demo">Trigger</button>

<div class="modal-wrapper" id="demo" style="display: none">
    <div class="modal">
        Modal content
    </div>
</div>

CSS:

.modal {
    margin: 10% auto;
    padding: 1em;
    overflow: hidden;

    width: 40%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .5);

    background: white;

    text-align: center;
}

.modal-wrapper {
    z-index: 1000;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
}

JS:

$('button[data-role="toggle-modal"]').click(function() {
    var target = ($(this).attr('data-toggle'));

    $(target).fadeIn(175);
});

$('.modal-wrapper').click(function() {
    $(this).fadeOut(175);
});

您可以在 this fiddle 上查看.
问题是，如果我在模态本身内部单击，它会关闭，我想与模态进行交互。我在这里需要 CSS 屏蔽吗？或者有其他解决方案吗？

Answer 1

您需要防止在子元素中触发点击事件。

$('.modal-wrapper').click(function(e) {
    if(e.target == e.currentTarget) {
        $(this).fadeOut(175);
    }
});