2

我正在尝试自己创建一个基本模式，但在这里遇到了一些麻烦（也许是因为我是使用 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();
});

有什么帮助吗？

问候，蒂亚戈·卡斯特罗

4

2 回答 2

3

尝试：

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

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

[编辑] 修复了一个错字并添加了jsFiddle的链接，使其正常工作

于 2012-04-19T23:49:03.053 回答
0

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

关于你的例子：

1）对于链接，我更喜欢执行以下操作：

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

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

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

于 2012-04-19T23:51:59.983 回答