Jquery弹出关闭按钮答案

【问题标题】：Jquery pop up close buttonsJquery弹出关闭按钮
【发布时间】：2014-01-30 02:33:17
【问题描述】：

您好，在 stackoverflow 贡献者的帮助下，我创建了一个 jquery 点击、弹出和关闭按钮。

当前的问题是我试图使红色方块成为关闭的 btn，如果您在打开的框周围单击以关闭它。

有人可以帮忙吗？

$('#some-button').on('click', function () { 
    $('#overlay, #overlay-back').fadeIn(500); 
});

$('#overlay').on('click', function () { 
    $('#overlay, #overlay-back').fadeOut(500); 
});

$('.callme').on('click', function (e) { 
    e.stopPropagation();
});

【问题讨论】：

标签： jquery html css hover

【解决方案1】：

只需将 #overlay-back 添加到您的第二个 click 函数中

$('#overlay, #overlay-back').on('click', function () { 
    $('#overlay, #overlay-back').fadeOut(500); 
});

Update Fiddle

【讨论】：

【解决方案2】：

还需要添加overlayback函数：

$('#overlay-back').on('click', function () { 
$('#overlay, #overlay-back').fadeOut(500); });

Fiddle

【讨论】：

Felix 的解决方案比我的要干净得多。

【解决方案3】：

$('#some-button').on('click', function () { 
    $('#overlay, #overlay-back').fadeIn(500); 
});

$('#overlay').on('click', function () { 
    $('#overlay, #overlay-back').fadeOut(500); 
});

$('.callme').on('click', function (e) { 
    $('#overlay, #overlay-back').fadeOut(500); 
    e.stopPropagation();
});

http://jsfiddle.net/EtHbf/308/

【讨论】：

【解决方案4】：

你也可以使用fadeToggle()

$('#some-button, #overlay').on('click', function () { 
    $('#overlay, #overlay-back').fadeToggle(500); 
});

$('#overlay-back').on('click', function () { 
    $('.callme, #overlay-back').fadeOut(500); 
});

JFIDDLE

【讨论】：