CODEWITHSUNDEEP
jqueryhtmlcsshover
user2965875
user2965875

Reputation: 701

Jquery pop up close buttons

Hi with help from the stackoverflow contributors I have created a jquery click , popup and close button.

The current issue is my trying to make the red square be the close btn and if you click around off the opened box for that to close too.

Can anybody help?

Here is my Fiddle>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();
});

Upvotes: 1

Views: 476

Answers (4)

rockStar
rockStar

Reputation: 1296

you can use the fadeToggle() too

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

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

JFIDDLE

Upvotes: 0

Kaptan
Kaptan

Reputation: 336

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

Upvotes: 0

Craighead
Craighead

Reputation: 519

You also need to add the overlayback function:

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

Fiddle

Upvotes: 1

Felix
Felix

Reputation: 38102

Just add #overlay-back to your second click function

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

Update Fiddle

Upvotes: 3

Related Questions