关闭 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 的链接，它可以正常工作

Answer 2

为什么不用jQuery的模态对话框？

关于你的例子：

1) 对于链接，我更喜欢这样做：

<a href="javascript:void(closeMyPopup());" class="close-modal">Close</a>

这样就不需要处理诸如 preventDefault 或 click 事件之类的事情

2）我猜你不想将点击事件绑定到“.modal-content”，而是想将它绑定到“#modal-mask”；）