2014-01-29 55 views
1

嗨,從stackoverflow貢獻者的幫助下,我創建了一個jQuery點擊,彈出和關閉按鈕。jquery彈出關閉按鈕

目前的問題是我試圖讓紅色方塊成爲近距離btn,如果你點擊打開的方塊來關閉它。

任何人都可以幫忙嗎?

這裏是我的小提琴>http://jsfiddle.net/EtHbf/301/

$('#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(); 
}); 

回答

3

只需添加#overlay-back你的第二個click功能

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

Update Fiddle

1

您還需要添加overlayback功能:

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

Fiddle

+0

費利克斯有比我更清潔的解決方案。 – Craighead

0
$('#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/

0

可以使用fadeToggle()

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

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

JFIDDLE