javascript - 关闭 jQuery 模态框

Question

我正在尝试自己创建一个基本模式，但在这里遇到了一些麻烦(也许是因为我是使用 jQuery 的专家 - 不要认真对待它)。

我有这个 HMTL 标记:

<div id="modal-boxes">
    <div id="modal-updates" class="modal-content">
        Content for modal box here.
        <a href="#" class="close-modal">Close</a>
    </div>
</div>
<div id="modal-mask"></div>

因此，我创建了一个函数来告诉模态框关闭并使 #mask div 消失。另一种是当我点击它之外的地方时，它无论如何都会关闭。换句话说，单击 #modal-updates div 外部与单击关闭按钮相同。但问题是，当我想在 #modal-updates div 内部单击(不应消失)时，它无论如何都会关闭。这是我的 JavaScript 代码:

$(".modal").click(function(e){

    e.preventDefault(); // Cancel the default link behavior

    $("#modal-mask").fadeTo(400, 0.4);
    $("#modal-boxes").fadeIn();

    var getName = "#" + $(this).attr("name");
    $(getName).fadeTo(400, 1);
});

function closeModal() {
    $("#modal-mask, #modal-boxes").fadeOut();
}

$(".close-modal").click(function(e){
    e.preventDefault();
    closeModal();
});

$(".modal-content").click(function(){
    closeModal();
});

有什么帮助吗？

问候，蒂亚戈·卡斯特罗

Answer 1

尝试:

$('#modal-updates').click(function(e) {
    e.stopPropagation();
});

如果操作正确，这将阻止 $("#modal-boxes").click() 触发。

[编辑]修复了拼写错误并添加了指向 jsFiddle 的链接让它工作