Close button for Jquery notification bar

Question

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!

Answer 1

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

Answer 2

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.