单击主体时关闭模态

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);
});

您可以在这个小提琴上查看一下。
问题是，如果我在模态本身内部单击，它将关闭，并且我想与模态进行交互。 我需要CSS遮罩吗？ 还是有其他解决方案？

Answer 1

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

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

Answer 2

使用StopPropagation ，尝试以下操作：

$(".modal").click(function(e) {
        e.stopPropagation();
});

检查演示小提琴

Answer 3

只需检查代码中的e.target ，然后基于该目标淡出对话框即可。

例：

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

演示： http ： //jsfiddle.net/gprf6Lna/3/