CODEWITHSUNDEEP
javascriptjquery
Malasorte
Malasorte

Reputation: 1173

Close button for Jquery notification bar

On this page "jquery notification bars that can be dismissed?" I found a nice and clean jquery notification bar. Fiddle here: Demo.

To close the bar, you just click anywhere in its body. How can I change this behavior? I need to add a close button (an X), that when clicked closes the bar. If the user clicks in the notification bar body, the desired result is that nothing should happen.

This is the code that closes the bar:

$('#notify').click(function() {
    $(this).slideUp().empty();
});

Thank you!

Upvotes: 0

Views: 1562

Answers (2)

D4V1D
D4V1D

Reputation: 5849

Well, just do:

$('#close-btn').click(function() {
    $('#notify').slideUp().empty();
});

Where #close-btn is, as you would have guessed, the button that closes the notify bar.

Upvotes: 0

Zhertal
Zhertal

Reputation: 425

You could do something like this:

HTML

<div id="notify">Welcome to the test page!<span id="closeNotify"> X </span></div>

Javascript

$('#closeNotify').click(function() {
    $('#notify').slideUp().empty();
});

$(function(){
    $('#notify').slideDown();
});

JSFiddle

Upvotes: 2

Related Questions