Question

我试图自己创建一个基本模式，我在这里遇到一点麻烦（也许是因为我是一个使用jQuery的专家 - 不要＆＃39;认真对待它。）

我有这个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()触发。

[edit]修正了一个拼写错误并添加了jsFiddle的链接，并使其正常工作

Answer 2

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

关于你的例子：

1）对于链接，我更喜欢做：

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

这样就无需处理诸如preventDefault或click事件

之类的事情

2）我想这不是将你的点击事件绑定到“.modal-content”而是想把它绑定到“＃modal-mask”;）

关闭jQuery Modal框

2 个答案: