Question

当我点击我联系我们的导航链接时，它会顺利打开，如果我点击叠加层中的任何地方它会顺利关闭，但是我点击关闭img，它在关闭时有一个研究。

如果我在“form-wrap”中单击，它也会关闭，但显然它不需要这样做，以便人们可以使用它。

这是一个链接和脚本。

$(document).ready(function () {
    $('#nav-contact, #foot-contact').click(function(){
        $('#overlay').show("clip", 600);
    });
    $('#close-btn, #overlay').click(function(){
        $('#overlay').hide("clip", 600);
    });
});

Answer 1

当您在表单内部单击时表单关闭的原因是因为#form-wrap包含在#overlay div中。

因此#form-wrap内的点击事件也会触发#overlay div内的点击。

您需要使用 e.stopPropagation() ：

来阻止它

$('#form-wrap').click(function(e){
    e.stopPropagation();
});

<强> Updated Fiddle

Answer 2

我认为它与button元素是另一个元素的子元素有关，这个元素在单击时也会导致模态被关闭。

所以，你能做的是：

$("#close-btn").click(function(e){
   $("#overlay").hide();
   return false;
}

这允许按钮工作。如果您希望表单在某处单击时不关闭模式，只需将$("#form-wrap").click(function(){event.preventDefault();})添加到脚本中即可。

单击图像时，jQuery .hide（'clip'）效果会导致重复效果

2 个答案: