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

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

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

Answer 2

使用StopPropagation，试试这个：

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

检查Demo Fiddle

Answer 3

只需检查代码中的e.target，然后根据该内容淡化对话框。

示例：

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

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

单击正文时关闭模态

3 个答案: